html5中data-*自定义属性

最新推荐文章于 2024-12-10 16:10:58 发布

原创最新推荐文章于 2024-12-10 16:10:58 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html自定义属性

前端html、js 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨HTML5中data-*属性的使用方法，包括属性规范、浏览器兼容性及JavaScript和jQuery操作技巧。同时，文章提供了实例代码，帮助读者理解如何在实际项目中应用data-*属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data-* 属性是HTML5中的新属性

<ul>
<li id="a" data-animal-type="鸟类">喜鹊</li>
<li id="b" data-animal-type="鱼类">金枪鱼</li>
<li id="c" data-animal-type="蜘蛛">蝇虎</li>
</ul>

data-*
属性名不应该包含任何大写字母，并且在前缀"data-"之后必须至少含有一个字符
属性值可以是任意的字符串
用户代理会完全忽略前缀为"data-"的自定义属性

浏览器兼容
IE Firefox Chrome Safari Opera
支持支持支持支持支持

js操作：
var aa =document.getElementById("aa");
aa.dataset.myvalue="新值" ;//设置自定义属性值
console.log(aa.dataset.myvalue);//获取自定义属性值

query操作：
$("#aa").data("myvalue","新值");//设置自定义属性值
console.log($("#aa").data("myvalue")); //获取自定义属性值

如果data-*自定义属性中包含了"-"，则属性名为驼峰式名称，如data-animal-type的属性名称为animalType
console.log(document.getElementById('a').dataset.animalType);//鸟类
console.log(document.getElementById('a').dataset['animalType']);//鸟类
//console.log(document.getElementById('a').dataset.animal-type);//报错 type is not defined
console.log(document.getElementById('a').dataset['animal-type']);//undefined

console.log($("#a").data('animal-type'));//鸟类

console.log($("#a").data('animalType'));//鸟类