前端问题(7)

2/10/2017来源:心得技巧人气:3087

What are data- attributes good for?


属于全局属性,是 HTML5 中的新属性。 data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的(自定义)数据能够被页面的 javaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。 data-* 属性包括两部分:

属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符 属性值可以是任意字符串

举例

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

JS访问 HTMLElement.dataset 属性允许我们访问所有在元素上自定义的data属性 也可以使用getAttribute()配合它们完整的HTML名称去读取它们

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

赋值的话,将会将属性值进行修改。

CSS 访问 可以通过generated content使用函数attr()来显示data-parent的内容:

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

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

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

注意

不要在data attribute里储存需要显示及访问的内容,因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。 IE11+支持这个标准,但所有更早期的版本都不支持dataset。为了支持IE10及以下的版本,必须使用getAttribute() 来访问。另外,读取 data-attributes的行为相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。