javascript中dataset属性详解
墨初 Web前端 525阅读
在JavaScript中有一个用于访问与操作html元素数据属性的快捷方法,此方法就是 dataset ,它可以轻松的读取与修改元素的自定义数据属性,从而可以灵活的操作与DOM绑定的数据。
js中的 dataset 属性是一个对象,其键是数据属性的名称(不带 data- 前缀,并且转换为 camelCase 格式),而值是相应的数据属性值。
dataset基本用法:
例:通过dataset获取元素的属性值
<div data-host="https://www.73so.com" data-name="73so博客" data-sub-name="一个技术博客" class="aa"></div> <script> const aa = document.querySelector('.aa'); // 属性值不要带 “data-” , 别外只能获取以 “data-” 开头元素属性 console.log(aa.dataset.host); console.log(aa.dataset.name); // 注意下面的属性,data-sub-name 要使用 camelCase 格式,也就是 subName console.log(aa.dataset.subName); </script>
例:通过dataset修改属性
<div data-host="https://www.73so.com" class="aa"></div> <script> const aa = document.querySelector('.aa'); console.log(aa.dataset.host); //输出结果; https://www.73so.com aa.dataset.host = 'https://www.baidu.com'; console.log(aa.dataset.host); //输出结果; https://www.baidu.com </script>
注意:
1、dataset 属性只能获取元素中以“data-”开头的属性。
2、dataset 属性输出数据时,不需要“data-”为开头。
3、dataset 属性不仅可以获取属性值,也可以修改属性值。
4、dataset 属性修改值时,是动态修改,也会更新到HTML元素上。
5、dataset 属性名对大小写不敏感,也就是不区分大小写。