HTML5中data*属性解读

js 代码

$(document).ready(function(){
var el = document.getElementById("testDiv");

console.log(el.dataset . cname) ;//=>张三
el.dataset.cname = "ZS";//设置值为"ZS"
console.log(el.dataset.cname);//=> "ZS "

console.log("遍历testDiv上自己的属性");
$.each(el.dataset, function(key, value){
console.log(key+":"+ value ;
});

检索自定义属性的值时，使用数据集属性，然后通过自定义属性的名称获取值（在这种情况下删除数据前缀).dataset是JS5规范中新增的属性，与data-*配合使用
我们必须考虑每个打印的结果：

1。如果 data- 后面包含“-”，例如 date-e-name，则“-”将被删除并转换为名称为 eName 的驼峰式大小写。这是因为 JSON Object 的 key 不能包含“-”。

2。如果data后面的单词是大写的，例如myName，它将被转换为小写的myname。我不明白为什么这里要转换为小写。 JSON 对象的键区分大小写。求专家指定？ ？

3、如果要删除data*属性，请使用delete dataset.cname或dataset.cname=null；

data-* 属性看起来不错，但遗憾的是仅在 Chrome 8+ Firefox (Gecko) (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ 的浏览器中实现了该标准。如果你的脚本需要兼容不同版本的主流浏览器，建议使用jQuery原生的getAttribute()或.attr()。