14.用.classList添加.删除.替换.查找.开关,元素属性_propertiespanel.classlist.toggle-CSDN博客

本文链接：https://blog.csdn.net/lazylYYY/article/details/119702976

一：案例：我们希望点击按钮的时候，a的宽高均变成400px

<!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>Document</title>
    <style>
        .b1 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .b2 {
            width: 400px;
            height: 400px;
            background-color: pink;

        }
    </style>
</head>

<body>
    <button id="button">按钮</button>
    <div id="a" class="b1 b3 b5 b6"></div>
    <!-- 我们希望点击按钮的时候，a的宽高均变成400px -->
    <script>
        let button = document.getElementById('button')
        let a = document.getElementById('a')

        button.addEventListener('click', function () {
            //1.假如该元素有多个class值，这种方式把其他class属性都删除了只变成b2
            // a.className = 'b2';

            //2.我们还可以+= 这样原属性不会消失
            // a.className += ' b2';//但是这种方法太low了

            /* 3. classList可以返回该元素的所有属性
                     他的类型是DOMTokenList，提供了如下方法：
                     add('类名')  用来向元素添加一个或多个类 
                     remove('类名') 用来移除一个类  
                     replace('旧类名','新类名')  用一个新class取代旧class
                     toggle('类名') 开关：切换元素的class，如果有就删除，没有就添加
                     contains('类名')   检查一个元素是否含有某个class名,包含true;不包含false
            */
            // console.log(a.classList)    //弹出b1 b3 b5 b6
            // a.classList.add('b2')
            a.classList.toggle('b2');//开关 切换b1和b2
            console.log(a.classList.contains('b1'))  //true
        })
    </script>
</body>

</html>