data-* 数据属性

一、概念
data-*属性允许我们在标准内于HTML元素中存储额外的信息。
所有在元素上以data-开头的属性都为数据属性。
二、javascript访问
1. getAttribute(）
2. dataset对象获取数属性，属性名后的data-后面的部分（破折号连接的名称需要转换为用驼峰式命名）

<article id="test" data-columns="3" data-index-number="1234"> </article>
var test = document.querySelector("#test");
test.dataset.columns // 
test.dataset.indexNumber //

三、CSS访问
data attributes设定为HTML属性，他们同样可以被CSS访问

acticle::before{
    content: attr(data-parent)
}
article[data-columns='3']{
    width:300px;
}
article[data-columns='4']{
    width:400px;
}