使用data-*属性指南

本文内容参考自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技术,倒是又可以大放异彩。

本站总访问量