html5中data-*自定义属性

 

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