前端问题(7)

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()读取数据来得慢。

展开阅读全文

没有更多推荐了,返回首页