【HTML5】'data-'属性的作用是什么?

Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。

data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好 地使用自定义的属性。

< div  data-author ="david"  data-time ="2011-06-20"
          data-comment-num ="10"   data-category ="javascript" >
....
</ div >

上面HTML代码提供了单个文章所拥有的一些属性。通过JS代码可以获得这些自定义的属性。

 

var post = document.getElementsByTagName('div')[0];
post.dataset;  //  DOMStringMap
post.dataset.commentNum;  //  10

需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。

并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。