当 HTML5 被定义时，其中一项计划是扩展 HTML 中数据的可扩展性，但这些数据不可见。 data-* 属性 允许我们在 HTML 元素上存储额外的信息，而无需使用非语义元素或污染类名。从本质上讲，这就是我们之前使用自定义属性的方式。

这些数据属性可以用多种方式使用，有些是不好的主意，但有些是好的计划。经验法则是，应该可见和可访问的内容不应存储在其中。原因是辅助技术不太可能访问它们，搜索爬虫也不会索引它们。

语法非常简单。假设您有一篇文章，并且您想要存储一些没有视觉表示的额外信息。只需为此使用数据属性即可

...

在 JavaScript 中读取这些属性也非常简单。您可以使用 getAttribute 来读取它们，但 HTML5 标准定义了一种更简单的方法：一个 DOMStringMap，您可以通过 dataset 属性读取它

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

// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"

每个属性都是一个字符串（即使您在 HTML 中省略了引号），并且可以读取和写入。在上述情况下，设置 article.dataset.columns = 5 将更改该属性。

现在，由于 data-属性是普通的 HTML 属性，您甚至可以从 CSS 中访问它们。例如，要显示文章上的父级数据，您可以使用 CSS 中的生成内容

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

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

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

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

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

屏幕录像中显示的代码示例也在 JSBin 上。

data-属性的问题

遗憾的是，似乎没有什么东西是如此简单和有用，而不会付出代价。在这种情况下，需要考虑的主要问题是 Internet Explorer 不支持 dataset，但您需要改为使用 getAttribute() 读取它们。另一个问题是 读取 data-属性的性能 与将这些数据存储在 JS 数据仓库中的性能相比很差。使用 dataset 甚至比使用 getAttribute() 读取数据更慢。

也就是说，对于不应显示的内容，它们是一个很好的解决方案，也许我们可以很快将其纳入下一个 IE 版本中。