H5自定义属性及兼容处理

"data-"前缀

可以让所有的HTML元素都支持自定义的属性。

举个栗子：

    <h1 data-sex="girl">111</h1>

获取自定义属性（使用H5自定义属性对象Dataset来获取）

 var dataNum = document.getElementsByTagName("h1")[0].dataset.sex;
 console.log(dataNum)
//另一个方法
 var another = document.getElementsByTagName("h1")[0].getAttribute("data-sex");
 console.log(another)

请注意，dataset 属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据属性。

自定义的data 属性名称转化成 DOMStringMap 的键值时会遵循下面的规则：

• 前缀 data- 被去除(包括减号)；
• 对于每个在ASCII小写字母 a到z前面的减号 (U+002D)，减号会被去除，并且字母会转变成对应的大写字母。
• 其他字符（包含其他减号）都不发生变化

与此相反的转换，即将键值转换为一个属性的名称，会遵循下面的规则：

• 约束：减号在转变前一定不能紧跟一个ASCII小写字母 a 到 z之间；
• 添加 data- 前缀;
• 任何ASCII大写字母 A 到 Z 将转化成一个减号紧跟对应的小写字母；
• 其他字符不会发生变化

上面规则的约束是为了保证这两种转换是正好相反的转换。

例如，属性名称 data-abc-def 与键值 abcDef 相对应。

删除data一个属性

 var myH1 = document.getElementsByTagName("h1")[0];
 delete myH1.dataset.sex

增加一个属性

myH1.dataset.addAttr="thisOne"

兼容处理

if(myH1.dataset){
myH1.dataset.hurry= "carry";
var thevalue = myH1.dataset.hurry;
}else{
myH1.setAttribute("data-attribute","carry");
var theValue = myH1.getAttribute("data-attribute"); // 获取自定义属性
}