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'));//鸟类