Don't panic.

HTML5 data attributes

HTML5 原生提供了data属性来存储数据,data 属性是一个全局的属性,所有 HTML 元素都可以使用,使用的方法是以data-为前缀来定义元素的属性名:

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

在 JS 中使用 data

data 中存储的数据可以在 JS 中通过元素内置的dataset属性获得,所获得的值均为字符串,这里要注意 data-index-number 这个 data,HTML 中 index 和 number 中间的-符号会根据「驼峰」原则转化。

var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

data 的值可以通过 dataset 直接修改:

article.dataset.columns = "4"

在 CSS 中使用 data

使用 attr() 函数获得 data 的值:

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

使用 CSS 的属性选择器attribute selectors 选择具有相应 data 值元素:

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

JSFiddle 示例:

参考文章: Using_data_attributes