在JS中使用dataset获取自定义属性注意事项

最新推荐文章于 2024-06-06 10:14:07 发布

theSunAndSnow

最新推荐文章于 2024-06-06 10:14:07 发布

阅读量4.2k

点赞数 7

分类专栏：前端学习笔记文章标签： javascript html html5

本文链接：https://blog.youkuaiyun.com/qq_44960253/article/details/106868020

版权

前端学习笔记专栏收录该内容

8 篇文章

订阅专栏

在JS中获取自定义属性的注意事项

参考链接

HTML5 中添加了 data-* 的方式来自定义属性，实际上就是在自定义属性名前加上前缀data- 即可，使用这样的结构可以进行数据存放。使用data-* 可以解决自定义属性混乱无管理的现状。

一个自定义一旦加上了前缀 data- ，那么在 JS 中就可以通过 elementNodeObject.dataset拿到这个属性，显然 dataset 是 attribute 集合的一个子集。
dataset 属性的值是 DOMStringMap的一个实例，也就是一个名值对儿的映射。在这个映射中，每个 data-name 形式的属性都会有一个对应的属性，只不过没有 data- 前缀。但是前缀之后的类名字符串也还是有蹊跷的……

使用 dataset 获得自定义属性值注意事项

直接使用 .操作符即可，但是.后面的自定义属性名称不需要再加上 data- 前缀；

若你在元素结点中的自定义属性使用驼峰式命名，你会惊奇的发现：无法直接在 dataset 中通过驼峰式命名格式来获得自定义属性的值！而必须使用全部小写形式。

<body>
    <div id="main" data-customizedAttr="hahaha"></div>
    <script>
        var main = document.getElementById('main');
        console.log(main.dataset.customizedAttr); 
        console.log( main.getAttribute("data-customizedAttr") );
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RiWR9E0g-1592617019519)(自定义属性注意事项.assets/image-20200620092941659.png)]

通过修改为全部小写形式即可：

console.log(main.dataset.customizedattr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jytrAgu2-1592617019522)(自定义属性注意事项.assets/image-20200620093057333.png)]

这一点直接输出 main.dataset 就可以看出来：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UYPyjOL6-1592617019524)(自定义属性注意事项.assets/image-20200620093156560.png)]

若你在元素结点中通过 - 来分隔单词，在 dataset 中去掉 data- 前缀，就可以通过驼峰式命名来获得自定义属性值。

<body>
    <div id="main" data-customized-attr="hahaha"></div>
    <script>
        var main = document.getElementById('main');
        console.log(main.dataset.customizedAttr);
        console.log( main.getAttribute("data-customized-attr") );
    </script>
</body>