hi,欢迎访问本站!
当前位置: 首页Web前端正文

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 属性名对大小写不敏感,也就是不区分大小写。

声明:无特别说明,转载请标明本文来源!
相关推荐