HTML5自定义属性

自定义属性的出现并非始于HTML5，但HTML5将 data-* 真正合法化。data自定义属性如何操作？有何用途？。

首先给定一段html代码：

<div id="div1" data-color="red" data-music={"m":"love","drink":"water"}>This is a div elem!</div>  
<div id="div2" data-color="yellow">This is a div elem,too!</div>  

注意：
1. 自定义属性用来存储或操作数据，可读可写，但不会在页面显示；
2. 属性值可以是普通的字符串(“string”)，也可以以json格式或数组来存储;

$("body").data("foo", 52);  
$("body").data("bar", { myType: "test", count: 40 });  
$("body").data({ baz: [ 1, 2, 3 ] });    

1. 通过CSS属性选择器选择特定元素，并为其设置样式：

div[data-color="red"]{background:red;color:white}  
div[data-color="yellow"]{background:yellow;color:black}  

浏览器效果：

 

2. 通过jQuery定义的 data() 方法操作：

data()方法出现在1.4.3 version后，意在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，之后获取这些值，其读写操作与attr()或prop()操作属性相似：

$("#div1").data("color"); //read  
$("#div1").data("color","orange") //reset  
$("#div2").data("music",{"sunshine girl"}) //new  
$("#div2").data("music");
$("#div1").data("music").drink //read,love  

注意：
1. 通过data()设置的自定义属性并不会在控制台中可见。
2. 尽管"data-" 是HTML5才出现的属性，但jquery是通用的，所以，在非HTML5的页面或浏览器里，你仍然可以使用.data(obj)方法来操作"data-*" 数据。

3. 通过原生JS操作：
原生JS中 dataset 用来存储data属性值，同 arguments 不是数组类似，dataset 也不是典型意义上的JS对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量。如下：

var oElem = document.getElementById('div1');  
oElem.dataset.color   //read  
oElem.dataset.color = "blue"   //reset  
oElem.dataset.book = "1984"   //new  

注意，dataset不会将json格式的参数值读取为对象，而是字符串。因此，需要首先将获取的字符串转换为对象，再通过 . 操作符操作。

eval("("+oElem.dataset.music+")").drink  //water  

当然，由于自定义属性也是属性，也可以通过 getAttribute/setAttribute 或者jQuery中的attr()或prop()方法来操作。