数据属性：在 HTML5 中以 data- 开头的为数据属性，数据属性用来存储没有可视化展示的额外信息
<article data-columns = "3" data-indexNumber = "12314" data-parent = "cars">
...
</article>
获取数据属性：可以使用 dataset 读取到数据
var article = document.querySelector('#electriccars');
article.dataset.columns// "3"
article.dataset.indexNumber// "12314"
article.dataset.parent// "cars"
每个属性都是可读写的字符串
data 为 attr 属性，css可以获取到
article::before{
content:attr( data-** )
}
可以通过css属性选择器改变css样式
article[ data-columns = 3 ]{
width : 400px;
}
article[ data-colimns = 4 ]{
width : 500px;
}
https://segmentfault.com/a/1190000003711146
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes
网友评论