使用数据属性

HTML 的设计考虑到了数据的可扩展性，这些数据应该与特定元素相关联，但不需要具有任何定义的含义。data-* 属性 允许我们存储关于标准语义 HTML 元素的额外信息，而无需其他 hack，例如非标准属性或 DOM 上的额外属性。

¥HTML is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

HTML 语法

¥HTML syntax

语法很简单。属性名称以 data- 开头的任何元素上的任何属性都是数据属性。假设你有一篇文章，并且想要存储一些没有任何视觉表示的额外信息。只需使用 data 属性即可：

¥The syntax is simple. Any attribute on any element whose attribute name starts with data- is a data attribute. Say you have an article and you want to store some extra information that doesn't have any visual representation. Just use data attributes for that:

html
<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  …
</article>

JavaScript 访问

¥JavaScript access

在 JavaScript 中读取这些属性的值也非常简单。你可以使用 getAttribute() 及其完整的 HTML 名称来读取它们，但该标准定义了一种更简单的方法：你可以通过 dataset 属性读出 DOMStringMap。

¥Reading the values of these attributes out in JavaScript is also very simple. You could use getAttribute() with their full HTML name to read them, but the standard defines a simpler way: a DOMStringMap you can read out via a dataset property.

要通过 dataset 对象获取 data 属性，请通过属性名称中 data- 后面的部分获取属性（注意破折号会转换为 camel case）。

¥To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camel case).

js
const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

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

每个属性都是一个字符串，可以读写。在上述情况下，设置 article.dataset.columns = 5 会将该属性更改为 "5"。

¥Each property is a string and can be read and written. In the above case setting article.dataset.columns = 5 would change that attribute to "5".

CSS 访问

¥CSS access

请注意，由于数据属性是纯 HTML 属性，你甚至可以从 CSS 访问它们。例如，要显示文章的父数据，你可以在 CSS 中使用 生成的内容 和 attr() 函数：

¥Note that, as data attributes are plain HTML attributes, you can even access them from CSS. For example to show the parent data on the article you can use generated content in CSS with the attr() function:

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

还可以使用 CSS 中的 属性选择器 根据数据改变样式：

¥You can also use the attribute selectors in CSS to change styles according to the data:

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

你可以看到所有这些都在协同工作 在这个 JSBin 示例中。

¥You can see all this working together in this JSBin example.

还可以存储数据属性来包含不断变化的信息，例如游戏中的得分。使用此处的 CSS 选择器和 JavaScript 访问，你可以构建一些漂亮的效果，而无需编写自己的显示例程。请参阅 这个截屏视频 了解使用生成内容和 CSS 转换的示例 (JSBin 示例)。

¥Data attributes can also be stored to contain information that is constantly changing, like scores in a game. Using the CSS selectors and JavaScript access here this allows you to build some nifty effects without having to write your own display routines. See this screencast for an example using generated content and CSS transitions (JSBin example).

数据值是字符串。必须在选择器中引用数值才能使样式生效。

¥Data values are strings. Number values must be quoted in the selector for the styling to take effect.

问题

¥Issues

不要在数据属性中存储应该可见和可访问的内容，因为辅助技术可能无法访问它们。此外，搜索爬虫可能不会索引数据属性的值。

¥Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes' values.

也可以看看

¥See also