自定义属性规范

最新推荐文章于 2022-03-19 01:48:41 发布

qq_39218277

最新推荐文章于 2022-03-19 01:48:41 发布

阅读量297

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_39218277/article/details/106255782

版权

自定义属性

以data-属性开头
可以使用element.setAttribute‘（‘属性’，值）设置属性值
可以使用element.getAttribute（‘data-属性’）获取属性
或H5新增element.dataset.属性或element.dataset[‘属性’]
如果data后属性不止一个而是使用-连接一个或多个使用驼峰命名法

dataset 是一个集合存放了所有以data开头的自定义属性

案例

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
    var div = document.querySelector('div');
    // console.log(div.getTime);
    console.log(div.getAttribute('getTime'));
    div.setAttribute('data-time', 20);
    console.log(div.getAttribute('data-index'));
    console.log(div.getAttribute('data-list-name'));
    // h5新增的获取自定义属性的方法 它只能获取data-开头的
    // dataset 是一个集合里面存放了所有以data开头的自定义属性
    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);
</script>