本文内容参考自MDN的using-data-attributes-in-javascript-and-css一文
一篇2012年的文章，目前data-属性作为HTML5规范已经不能算是新特性了，主要是JSconf里看到troopjs使用，而boss问其他小伙伴时他们居然都不知道，于是就想总结一番。
data-属性使用起来也很直观：
<article id=”electriccars” data-columns=”3” data-indexnumber=”12314” data-parent=”cars”>…</article>
;
JS可以使用getAttribute方法获得data-属性的值，当然HTML5规范里也提供更为简便的方法:
var article = document.querySelector(‘#electriccars’),
data = article.dataset;
// data.columns -> “3”
// data.indexnumber -> “12314”
// data.parent -> “cars”
每个属性返回都是string类型，但是可以直接设置article.dataset.columns = 5 从而改变属性的值
大多数人不知道的是HTML5还规定了data-属性相关CSS接口，可以通过该属性值来填充内容:
article::before {
content: attr(data-parent);
}
你也可以在选择器中使用data-属性:
article[data-columns=’3’]{
width: 400px;
}
article[data-columns=’4’]{
width: 600px;
}
data-*属性的优势在于相关数据直接与dom节点绑定，css接口使用也挺方便，至于效率方面是否比window storage更高，留待以后测试。未来结合Web Component技术，倒是又可以大放异彩。