使用 data-* 属性来嵌入自定义数据：

全栈程序员-站长 • 2021年10月17日下午7:00 • 未分类 • 阅读 44

使用 data-* 属性来嵌入自定义数据：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
</head>
<body>

<h1>物种</h1>

<p>点击某个物种来查看其类别：</p>

<ul>
  <li οnclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
  <li οnclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>  
  <li οnclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>  
</ul>

</body>
</html>

定义和用法

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串

注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/113463.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

win+printscreen_AltStore

win+printscreen_AltStoreC# 模拟PrintScreen 和 Alt+PrintScreen

全栈程序员-站长
2022年4月22日
Loadrunner从入门到精通教程（一）

Loadrunner从入门到精通教程（一）第一章：性能测试基础1-1.大话性能测试性能测试是什么使用自动化测试工具对产品按一定的性能指标进行测试。解决心性能平衡.给用户最好的体验。性能测试的时代背景,作用。大数据时代网站（BA).软件（T),游戏–金融银行，证券系统，教育（教务系统），交通（12306）–1-2性能测试那些事一.性能测试基本流程二、Web性能测试常用指标…

全栈程序员-站长
2022年5月24日
浅谈RHEL7和RHEL6的主要变化

浅谈RHEL7和RHEL6的主要变化

全栈程序员-站长
2022年4月2日
服务器购买_服务器可以挂什么赚钱

服务器购买_服务器可以挂什么赚钱原标题：解放双手，什么值得买自动签到京东自动签到给你更多时间享受生活日活作为考核运营狗的重要指标，为了日活，签到成了各大网站和app日活指标达成的重要举措。签到给红包、签到升等级、签到拿好礼，种种签到福利固然好，可苦了佛系玩家，不签到没奖励、不签到没等级没金币各种限制。那么今天就给大家搬运个小福利：自动签到！当然对于itg是不屑的，能分分钟写出代码然后放置服务器自动运行。小白，自然要依靠大佬的…

全栈程序员-站长
2022年9月13日
什么是linux Qt[通俗易懂]

什么是linux Qt[通俗易懂]Qt是一个跨平台的C++图形用户界面库，由挪威TrollTech公司出品，目前包括Qt，基于Framebuffer的QtEmbedded，快速开发工具QtDesigner，国际化工具QtLinguist等部分Qt支持所有Unix系统，当然也包括Linux，还支持WinNT/Win2k，Win95/98平台。

全栈程序员-站长
2022年5月17日
数据库中间件简介_数据库中间件还用吗

数据库中间件简介_数据库中间件还用吗数据库中间件可以简化对读写分离以及分库分表的操作，并隐藏底层实现细节，可以像操作单库单表那样操作多库多表，主流的设计方案主要有两种：1、服务端代理：需要独立部署一个代理服务，该代理服务后面管理多个数据库实例，在应用中通过一个数据源与该代理服务器建立连接，由该代理去操作底层数据库，并返回相应结果。优点是支持多语言，对业务透明，缺点是实现复杂，实现难度大，同时代理需要确保自身高可用2、客户端代理：在连接池或数据库驱动上进行一层封装，内部与不同的数据库建立连接，并对SQL…

全栈程序员-站长
2022年10月24日

发表回复

关注全栈程序员社区公众号