自定义属性 data-*

Posted 2021-03-02 shemingxin

在html5中添加了data-的方式来自定义属性，所谓data-实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。
设置自定义属性有如下2种方式：
（1）第一种方式是可以直接在 HTML 标签上面书写：

<ul id="sidebar-menu" class="bm-menu">
            <li  class="bm-menu-item" data-id="1" data-url="./table.html">
                表单
            </li>
            <li  class="bm-menu-item" data-id="2" data-url="./404.html">
                404
            </li>
            
</ul>

在通过这个方式设置的时候需要注意的是，如果设置的自定义属性是多个单词的组合的话，需要用中横线（-）链接,比如：

<h2 data-birth-date="20200407">hello</h2>

（2）第二种方式是通过 js 的 dataset 属性来设置：

var test = document.getElementsByTagName(‘li‘);
test.dataset.url="./404.html"

HTML5 中元素都会有一个dataset的属性，这是一个 DOMStringMap 类型的键值对集合。
通过这种方式设置同样需要注意，如果设置的是多个单词的组合的话，需要使用驼峰命名法来书写:

var test = document.getElementsByTagName(‘li‘);
test.dataset.birthDate="20200407"