获取、设置、移除元素属性

原创已于 2022-06-29 17:21:11 修改 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2022-06-28 16:54:52 首次发布

本文介绍了如何使用JavaScript获取元素的属性值（getAttribute），设置元素属性（setAttribute），以及移除属性（removeAttribute）。重点讲解了HTML5中关于自定义属性（data-前缀）的获取方法，包括dataset对象的使用。

获取元素的属性。getAttribute

<body>
    <div id="demo" index="1">
    </div>
    <script>
        var div=document.querySelector('div');
        // 获取元素的属性值
        // 1、element.属性
       console.log(div.id);
        // 2、element.getAttribute('属性')可获取到自定义属性index
        console.log(div.getAttribute('di'));
        console.log(div.getAttribute('index'));
    </script>
</body>

设置元素属性值。setAttribute

<script>
    // 设置元素属性值
    // 1、element.属性='值'
    div.id='test';
    div.className='clsn';
    // 2、element.setAttribute('属性','值');主要针对自定义属性
    div.setAttribute('index',2);
    div.setAttribute('class','footer');
</script>

移除属性。removeAttribute

// 移除属性
div.removeAttribute('index');

H5新增获取自定义属性。

H5规定，自定义属性前加上data-。

<script>    
    //设置自定义属性
    div.getArribute('data-time',1)
    div.getArribute('data-list-name')
    //获取自定义属性
    //dataset是一个集合  里面存放了所有data-开头的的自定义属性
    //ie 11才有 有兼容性问题
    div.dataset
    div.dataset.index
    div.dataset['index']
    //如果自定义属性里有多个-链接的单词，获取的时候采用驼峰命名法
    div.dataset.listName
    div.dataset['listName']
</script>