HTML5的自定义属性的使用总结

以前我们需要自定义属性的时候一般是这样做的，在标签里面加上我们自己设置的一些属性：

[html]  view plain  copy

1. <div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div>  

然后获取里面的值是使用 getAttribute来获取自定义属性里面的值：

[javascript]  view plain  copy

1. var myDiv = document.getElementById("myDiv");  
2.   
3. var theValue = myDiv.getAttribute("user-defined-attribute");  

现在 H5为我们提供了一个 data属性——“ data-”前缀， 可以让所有的 HTML元素支持自定义属性，只要 在标签里面 以” data- ”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

[html]  view plain  copy

1. <div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>  

这个data属性还可以应用在CSS中，前提是 你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：

[html]  view plain  copy

1. <div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>  

[css]  view plain  copy

1. #myDiv{  
2.   position: ralative;  
3. }  
4.   
5. #myDiv:hover:after{  
6.   position: absolute;  
7.   top: 0px;  
8.   left: 0px;  
9.   content: attr(data-attribute);  
10.   color: red;  
11. }  

如何获取data属性的值？

[html]  view plain  copy

1. <div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>  

一、使用getAttribute来获取

[javascript]  view plain  copy

1. var myDiv = document.getElementById("myDiv");  
2. var theValue = myDiv.getAttribute("user-defined-attribute");  

二、使用Html5 自定义属性对象Dataset来获取

[javascript]  view plain  copy

1. var myDiv = document.getElementById("myDiv");  
2.   
3. var theValue = myDiv.dataset.attribute;  

注意： 带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似， dom.style.borderColor 。例如data属性为 data-other-attribute ，则我们要获取相应的值可以使用：myDiv.dataset.otherAttribute

如果Html元素定义了多个自定义属性，如何获取？

[html]  view plain  copy

1. <div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>  

一、使用循环遍历

[javascript]  view plain  copy

1. var myDiv = document.getElementById("myDiv");  
2. var attrs = myDiv.attributes,  
3. var expense = {}, i, j;    
4. for (i = 0, j = attrs.length; i < j; i++) {  
5.   if(attrs[i].name.substring(0, 5) == 'data-') {  
6.     expense[attrs[i].name.substring(5)] = attrs[i].value;  
7.   }  
8. }  

二、 使用 dataset 属性

[javascript]  view plain  copy

1. var expense = document.getElementById('myDiv').dataset;  

注： dataset 并不是典型意义上的JavaScript对象，而是个 DOMStringMap对象 ， DOMStringMap 是HTML5一种新的含有多个名-值对的交互变量

1、让所有的自定义的属性值塞到一个数组中

[javascript]  view plain  copy

1. var chartInput = [];  
2.   
3. for (var item in expense) {  
4.   chartInput.push(expense[item]);  
5. }  

2、 删掉一个 data属性

[javascript]  view plain  copy

1. delete myDiv.dataset.attribute;  

3、增加一个data属性

[javascript]  view plain  copy

1. myDiv.dataset.attribute4 = 'value4';  

dataset的兼容性处理

如果浏览器不支持dataset，有必要做一下兼容处理：

[javascript]  view plain  copy

1. if(myDiv.dataset) {  
2.   myDiv.dataset.attribute = "valueXX"; // 设置自定义属性  
3.   var theValue = myDiv.dataset.attribute; // 获取自定义属性  
4. } else {  
5.   myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性  
6.   var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性  
7. }  

结语：

使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。