HTML 'data-'属性的作用是什么?

🌙
手机阅读
本文目录结构
axihe

核心

data-xxx 为前端开发者提供自定义的属性,这些属性集可以通过对象的 dataset 属性获取,不支持该属性的浏览器可以通过 getAttribute 方法获取;

var cur = document.getElementById('cur');

//使用attributes方法存取data-*自定义属性的值非常方便
var trueImg = cur.getAttribute("data-img");

//使用setAttribute设置 data- 属性
cur.setAttribute('data-site', 'http://www.xxx');

需要注意的是,data- 之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。

案例说明

语法非常简单。所有在元素上以 data- 开头的属性为数据属性。比如说你有一篇文章,而你又想要存储一些不需要显示在浏览器上的额外信息。请使用 data 属性:

HTML

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

JS

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

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

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

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

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

CSS 访问

注意,data 设定为 HTML 属性,他们同样能被 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 属性同样可以存储不断变化的信息,比如游戏的得分。

使用 CSS 选择器与 JavaScript 去访问可以让你得到花俏的效果,这里你并不需要用常规的编写方案来编写代码。

数据值是字符串。必须在选择器中引用数值才能使样式生效。

说明

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:

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

  • 属性值可以是任意字符串

参考

更多面试题

如果你想了解更多的前端面试题,请点击下面进行选择,这里基本包涵了市场上的所有前端方面的面试题,让你面试更加顺利。

这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang