HTML5 自定义属性 data-*介绍

时间：2023-03-09 21:28:34
HTML5 自定义属性 data-*介绍

在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢？

更便的捷操作

我们先来给大家介绍一下HTML5 dataset属性，他会以键值对的形式返回你所有以data- 开头的自定义属性

   <p class="test" data-name="cqs" data-age="25" ></p>
   <p  data-name="lw" data-age="25" ></p>
   <p  data-name="ll" data-age="24" ></p>
    var oText = document.querySelector('.test');
         console.log(oText.dataset); //DOMStringMap { age: "25", name: "cqs" }
         console.log(oText.dataset.name,oText.dataset.age); // cqs,25
        console.log(oText.getAttribute('data-name')) // cqs

data-name,data-age 这两个就是我们自定义的属性通过dataset.(点)加data-后面的名字就可以读 name和age的值。同样用getAttribut也可以读取data-*自定义属性的值但是注意要把data-带上。用js去设置data-*自定属性只需DOM.dataset.xx = 'xx';即可
这里需要强调的一点是如果想要定义成data-job-coder="frontEnd"这种data-*-*的格式的自定义属性,在js里面就要转成驼峰命名法。常见的操作有DOM.style.fontSiez = xx+'px';DOM.style.backgroundColor = black; font-size,background-color这些以-连接的属性用js去操作都需要转成驼峰命名法。

   <p class="test" data-name="cqs" data-age="25" ></p>

    var oText = document.querySelector('.test');
        oText.dataset.job = 'coder'; 相当于setAttribute('data-job','coder');
        oText.dataset.jobCoder="frontEnd"

通过对比其实不难发现 用html5 dataset属性去操作data-*自定义属性，就是getAttribute和setAttribute的语法糖。

css可以选择器也可以认data-*

   <style>
     [data-age]{
            background-color: red;
          color:#fff;
    }
   </style>
   <p class="test" data-name="cqs" data-age="25" >22</p>
   <p class="test" data-name="cqs"  >33</p>

HTML5 自定义属性 data-*介绍

放心dataset这么好用的属性肯定存在兼容性的问题
Chrome8
Firefox (Gecko) 6.0 (6.0)
internet Explorer 11
Opera 11.10
*Safari 6
参考文章链接: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
扩展阅读: http://www.cnblogs.com/cqsjs/p/5709754.html

相关文章