阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

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

    核心

    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-” 之后必须有至少一个字符

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

    参考

    更多面试题

    如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

    面试题
    HTML CSS JavaScript
    jQuery Vue.js React
    算法 HTTP Babel
    BootStrap Electron Gulp
    Node.js 前端经验相关 前端综合
    Webpack 微信小程序 -

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

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录