前端问题（7）

What are data- attributes good for?

---

属于全局属性，是 HTML5 中的新属性。
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：

• 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
• 属性值可以是任意字符串

举例

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

JS访问
HTMLElement.dataset 属性允许我们访问所有在元素上自定义的data属性
也可以使用getAttribute()配合它们完整的HTML名称去读取它们

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

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

赋值的话，将会将属性值进行修改。

CSS 访问
可以通过generated content使用函数attr()来显示data-parent的内容：

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

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

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

注意

不要在data attribute里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。
IE11+支持这个标准，但所有更早期的版本都不支持dataset。为了支持IE10及以下的版本，必须使用getAttribute() 来访问。另外，读取 data-attributes的行为相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。