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

您所在的位置：网站首页 › js设置自定义属性 › 在JS中使用dataset获取自定义属性注意事项

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

2023-08-19 04:28| 来源: 网络整理| 查看: 265

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

参考链接

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

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

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

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

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

var main = document.getElementById('main'); console.log(main.dataset.customizedAttr); console.log( main.getAttribute("data-customizedAttr") );

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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- 前缀，就可以通过驼峰式命名来获得自定义属性值。

var main = document.getElementById('main'); console.log(main.dataset.customizedAttr); console.log( main.getAttribute("data-customized-attr") );

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

直接打印 dataset ：

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

【本文地址】

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

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

今日新闻

推荐新闻