HTML5 data-* 自定义属性-优快云博客

本文探讨了HTML5中新增的data-*属性的应用场景及其优势，并通过实例展示了如何使用这些自定义属性来存储额外的数据信息。此外还讨论了data-*属性在不同浏览器中的兼容性问题。

在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在 HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

说明：下面代码中紫色的文字是声明data-*的两种方式。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>javascript</title>
 6     <style type="text/css">
 7         [data-birth-date]{
 8             background-color: #0f0;
 9             width:100px;
10             margin:20px;
11         }
12     </style>
13 </head>
14 <body>
15 <div id="test" data-age="25">
16     click here
17 </div>
18 </body>
19 </html>
20 <script type="text/javascript">
21     var test = document.getElementById("test");
22     test.dataset.my = "meng";
23     test.dataset.birthDate = "19910512"
24     test.onclick = function () {
25         alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);
26     }
27 </script>