data-* 自定义属性

参考于：

data-* 自定义属性 - MDN

HTML 定义自定义属性

所有在元素上以 data- 开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息，就可以使用 data 属性，如下：

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  ...
</article>

JavaScript 访问自定义属性

var article = document.querySelector("#electriccars");

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

var article = document.querySelector("#electriccars");

article.getAttribute('data-columns') // "3"
article.getAttribute('data-index-number') // "12314"
article.getAttribute('data-parent') // "cars"

CSS 访问自定义属性

data 设定为 HTML 属性，它们同样能被 CSS 访问。访问方式如下：

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

同样也可以在 CSS 中使用属性选择器根据 data 来改变样式：

article[data-columns='3'] {
  width: 300px;
}