HTML5中的data-*属性解读

<div data-cname="张三" data-e-name="zhangsan" data-myName="my name is zs.">测试在元素上存储一个key-value</div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

js代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

$(document).ready(function(){
var el = document.getElementById("testDiv");文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

console.log(el.dataset.cname);//=>张三
el.dataset.cname = "ZS";//设置值为"ZS"
console.log(el.dataset.cname);//=>"ZS"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

console.log("遍历testDiv上的自有属性");
$.each(el.dataset, function(key, value){
console.log(key+":"+value);
});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

//遍历testDiv上的自有属性
//cname:ZS
//eName:zhangsan
//myname:my name is zs.
<span> </span>
});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

在获取自定义属性的值时，使用dataset属性，然后通过自定义属性(这时去掉data-前缀)的名称去获取值。dataset是JS5规范中新增加的属性，用于和data-*配合使用。
通过each打印的结果，我们需要注意：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

1，如果data-后面包含了“-”，例如 date-e-name，"-"会去掉，并转换成为骆驼峰式的命名 eName。这是因为JSON Object 的key不能包含”-“。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

2，如果data-后面的单词有大写，例如 myName，将会转存成小写 myname。这里就不理解为什么会转换成小写了，JSON Object的key是区分大小写的。求高人指定？？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

3，如果你想删除一个data-*属性，请使用 delete dataset.cname或者dataset.cname=null;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

data-*属性看起来很好，但是不幸的是只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的浏览器中实现了此标准。如果你的脚步需要兼容各主流浏览器的不同版本建议还是使用原生的getAttribute()或jQuery中的.attr()。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html

　文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/10166.html