前端问题（7）

What are data- attributes good for?

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

举例

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

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

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

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

注意

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