获取/删除/修改元素的属性/样式/类名的方法有哪些?

54 阅读1分钟

元素的属性

1. 获取元素的某些属性

  • 语法: 元素.getAttribute('要查询的属性名')
  • 返回值: 查询到属性时返回对应的属性值, 没有查询到时直接返回 null

2. 修改元素的某些属性

  • 语法: 元素.setAttribute('对应的属性名', '对应的属性值')
  • 注意: 如果元素没有对应的属性名, 那么相当于是新增一个属性

3. 删除元素的某些属性

  • 语法: 元素.removeAttribute('要删除的属性名')
<body>
    <div class="box" a="QF001"></div>
    <script>
        // 0. 获取元素
        var oDiv = document.querySelector('.box')

        //1. 获取元素的某些属性
        console.log(oDiv.getAttribute('a'))//结果显示为QF001
        console.log(oDiv.getAttribute('class'))//结果显示box
        console.log(oDiv.getAttribute('b'))//没有这个属性名,显示为null

        //2. 修改元素的某些属性
        oDiv.setAttribute('a', 'QF999')//属性名存在,修改属性值为QF999
        oDiv.setAttribute('b', 'qwer')//属性名不存在,新增属性和属性值
        oDiv.setAttribute('class', 'new_box')//属性名存在,修改属性值为new_box
        console.log(oDiv.getAttribute('a'))//因为修改了属性值,打印出来a的属性值为QF999
        
        //3. 删除元素的某些属性
        oDiv.removeAttribute('class')//删除class这个属性
        oDiv.removeAttribute('a')//删除a这个属性
    </script>
</body>

元素样式

方法1:元素.style.某个属性

注意:

  • 我们也可以给这个语法重新赋值, 达到修改元素样式的效果 (修改的是行内的样式)
  • 这种语法获取到的元素样式, 只能获取到行内样式

方法2:window.getComputedStyle(元素).要查询的css属性

注意:

  • 这种方式获取到的属性 是只读的能获取到, 但是不允许修改
<head>
     <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
     </style>
</head>
 
<body>
    <div class="box" style="background-color: red;"></div>

    <script>
        // 0. 获取元素
        var oDiv = document.querySelector('.box')

        // 1. 获取元素样式
        console.log(oDiv.style.width)
        console.log(oDiv.style.height)
        console.log(oDiv.style.background-color)    // 直接这样写相当于写了一个 oDiv.style.background - color, 这是一个错误写法
        console.log(oDiv.style['background-color']) // 中括号语法
        console.log(oDiv.style.backgroundColor) // 驼峰命名

        // 2. 设置元素样式
        oDiv.style.width = 666 + 'px'
        oDiv.style.backgroundColor = 'red'

        //3. 获取非行内样式
        console.log(window.getComputedStyle(oDiv).width)
        console.log(window.getComputedStyle(oDiv).backgroundColor)
        window.getComputedStyle(oDiv).width = 800 + 'px' // 不允许修改, 会有报错
    </script>
</body>

元素类名

1.className

  • 专门用来操作元素的类名
  • 语法: 元素.className
  • 我们也可以给他重新赋值, 来达到修改元素的类名

2. classList

  • 获取元素类名:元素.classList
  • 新增元素类名:元素.classList.add('类名')
  • 删除元素类名:元素.classList.remove('类名')
 <body>
    <div class="box new_box"></div>
    <script>

        // 0. 获取元素
        var oDiv = document.querySelector('.box')
        //1.1 获取类名
        console.log(oDiv.className)
        //1.2 重新赋值类名
        oDiv.className = 'qwer'//如果类名有2个以上,重新赋值会把已有的类名全部删除,再赋值

        // 2.1 获取类名
        console.log(oDiv.classList)

        // 2.2 新增类名
        oDiv.classList.add('qwer')

        // 2.3 删除类名
        oDiv.classList.remove('new_box')
    </script>
</body>