使用数据属性

HTML 旨在具有可扩展性，用于应与特定元素关联但不需要任何定义含义的数据。 data-* 属性 允许我们在标准的、语义化的 HTML 元素上存储额外的信息，而无需其他技巧，例如非标准属性或 DOM 上的额外属性。

HTML 语法

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

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

JavaScript 访问

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

要通过 dataset 对象获取 data 属性，请获取属性名称中 data- 后面的部分（注意，连字符会转换为 驼峰式大小写）。

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"。

CSS 访问

请注意，由于数据属性是普通的 HTML 属性，因此您甚至可以从 CSS 中访问它们。例如，要显示文章上的父数据，您可以使用 CSS 中的 生成内容 以及 attr() 函数

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

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

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

您可以在 此 JSBin 示例 中看到所有这些协同工作。

数据属性还可以存储以包含不断变化的信息，例如游戏中的分数。在此处使用 CSS 选择器和 JavaScript 访问，您可以构建一些巧妙的效果，而无需编写自己的显示例程。请参阅 此屏幕截图，了解使用生成内容和 CSS 过渡的示例（JSBin 示例）。

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

问题

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

另请参阅