--- title: 使用数据属性 slug: Learn/HTML/Howto/Use_data_attributes tags: - Custom Data Attributes - HTML5 translation_of: Learn/HTML/Howto/Use_data_attributes original_slug: Web/Guide/HTML/Using_data_attributes ---

{{LearnSidebar}}

HTML5是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。data-* 属性允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 classList，标准外属性，DOM额外属性或是 setUserData 之类的技巧。

HTML 语法

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

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

JavaScript 访问

在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用{{domxref("Element.getAttribute", "getAttribute()")}}配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：{{domxref("DOMStringMap")}}你可以使用{{domxref("HTMLElement.dataset", "dataset")}}读取到数据。

为了使用dataset对象去获取到数据属性，需要获取属性名中data-之后的部分(要注意的是破折号连接的名称需要改写为骆驼拼写法(如"index-number"转换为"indexNumber"))。

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

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

每一个属性都是一个可读写的字符串。在上面的例子中，article.dataset.columns = 5.将会调整属性的值为5。

CSS 访问

注意，data设定为HTML属性，他们同样能被CSS访问。比如你可以通过generated content使用函数{{cssxref("attr")}}来显示data-parent的内容：

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

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

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

你可以在这个JSBin 里看到全部演示。

Data属性同样可以存储不断变化的信息，比如游戏的得分。使用CSS选择器与JavaScript去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。有关使用生成内容和CSS转换（JSBin示例）的示例，请参阅此视频。

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

Issues

不要在data attribute里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。

IE的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准，但所有更早期的版本都不支持dataset。为了支持IE10及以下的版本，你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外，读取 data-attributes的行为相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。

尽管如此,对于那些与元素相关的数据,这依然是一个很好的解决方案.

在FireFox 49.0.2(其他版本也有可能)中,javascript将无法读出包含1022个及以上字符的data属性(EcmaScript 4).

参阅