使用数据属性

使用数据属性

 

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

HTML 语法

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

1 <article
2   id="electriccars"
3   data-columns="3"
4   data-index-number="12314"
5   data-parent="cars">
6 ...
7 </article>

 

JavaScript 访问Section

在外部使用JavaScript去访问这些属性的值一样很是简单。你可使用getAttribute()配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：DOMStringMap你可使用dataset读取到数据。

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

1 var article = document.querySelector('#electriccars');
2  
3 article.dataset.columns // "3"
4 article.dataset.indexNumber // "12314"
5 article.dataset.parent // "cars"

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

CSS 访问Section

请注意到，data attributes设定为HTML属性，他们一样能被CSS访问.好比你能够经过generated content使用函数attr()来显示data-parent的内容：

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

 

你也一样能够在CSS中使用属性选择器根据data来改变样式：

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

 

你能够在这个JSBin 的实例里面看到所有的演示。

 

Data属性一样能够存储不断变化的信息，好比游戏的得分。使用CSS选择器与JavaScript去访问可让你获得花俏的效果，这里你并不须要用常规的编写方案来编写代码。 请参考这个墙外视频  (JSBin example).

IssuesSection

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

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

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

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

参阅Section

 

• 该文章源自 Using data attributes in JavaScript and CSS on hacks.mozilla.org.
• 在 SVG 2中也一样支持自定义data属性; 请参看SVGElement.dataset 和data-*.
• How to use HTML5 data attributes (Sitepoint)