html元素中的data-*属性

data-全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有HTML元素上嵌入自定义数据属性的能力，并可以通过脚本在HTML与DOM表现之间进行专有数据的交换。通过添加 data- 属性，即使是普通的 HTML 元素也能变成相当复杂且强大的编程对象。它的初衷是数据应与特定的元素相关联，但不需要任何定义。data-*属性允许我们在标准内于HTML元素中存储额外的信息，

属性创建

text=document.createElement('p');
text.dataset.user='admin';
text.dataset.states='login';

这样就可以创建一个含有data属性的元素，元素代码如下；

<p data-states="login" data-user="admin"></p>

属性访问

text.dataset.user
text.dataset.states

属性删除

delete  text.dataset.user

css访问

article::before {
  content: attr(data-parent);
}

使用css属性选择器

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}