JavaScript-读取/操作元素属性 - sdk社区

读取元素属性值

元素对象.属性名
元素对象.getAttribute(‘属性名’)

两者区别：

方法1 只能读取自带属性，不能读取自定义属性
方法2 自带、自定义属性都可以读取

一般，读取自带属性就用传统的方法1；
读取自定义属性用方法2

H5中自定义属性一般加上前缀“data-”，例如“data-index”

获取data-开头的自定义属性还可以用- - -元素对象.dataset.除前缀的后面名，eg: 元素对象.dataset.index

如果自定义属性名较长，如这种：data-fruit-name=“orange”，dataset获取时要使用驼峰法，eg：元素对象.dataset.fruitName

没有以data-开头的不能用dataset获取到

元素对象.dataset- - -里面包含了该对象所有以data-开头的属性

获取自定义属性一般还是常用- - -getAttribute()

修改元素属性值

元素对象.属性名 = 属性值
元素对象.setAttribute(‘属性名’, 属性值)

自带属性用方法1 修改
自定义属性用方法2 修改（也可以改自带属性）

删除元素属性

元素对象.removeAttribute(‘属性名’)

使用示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性先关操作</title>
    <style>
        .box {
            width: 300px;
            height: 100px;
            margin: 100px auto;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box" id="demo" index="2">
        属性- - -自带属性、自定义属性
    </div>

    <script>
        // 获取元素对象
        var div = document.querySelector('.box');

        // 读取元素属性值
        console.log(div.id);
        console.log(div.index);
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));

        // 修改元素属性值
        div.id = 'intro';
        console.log(div.id);
        div.setAttribute('index', 3);
        console.log(div.getAttribute('index'));
        div.setAttribute('id', 'introduce');
        console.log(div.id);

        // 删除属性
        div.removeAttribute('index');
    </script>
</body>

</html>

打印结果: