登录
原创

JavaScript-读取/操作元素属性

发布于 2021-07-07 阅读 180
  • 前端
  • JavaScript
  • CSS
  • HTML
原创

读取元素属性值

  1. 元素对象.属性名
  2. 元素对象.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()

修改元素属性值

  1. 元素对象.属性名 = 属性值
  2. 元素对象.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>

打印结果:

image.png

image.png

评论区

零00
4粉丝

时光荏苒,我自清欢

0

0

0

举报