JS动态添加样式类名

时间：2025-04-07 22:02:52

className

元素.className = '类名'，使用className添加类名，会将其他类名所删除，只剩下添加的这个类名

<body>
    <div class="nav">123</div>
    <script>
        // 1. 获取元素
        const div = document.querySelector('div')
        // 2.添加类名 class 是个关键字 我们用className
        // 添加box类，但由于本身也有一个nav类，使用空格隔开可以一起添加，不会导致样式被删除
        div.className = 'nav box'
    </script>
</body>

classList

(‘类名’)

元素.('类名')，在其他类名的基础上，在添加一个类名

<body>
    <div class="box">文字</div>
    <script>
        // 通过 classList 添加
        // 1. 获取元素
        const box = document.querySelector('.box')
        // 2 追加类 add() 类名不加点，并且是字符串
        box.classList.add('active')
    </script>
</body>

(‘类名’)

元素.('类名')，删除指定类名

<body>
    <div class="box">文字</div>
    <script>
        // 通过 classList 添加
        // 1. 获取元素
        const box = document.querySelector('.box')
        // 2. 删除类 remove() 类名不加点，并且是字符串
        box.classList.remove('box')

    </script>
</body>

(‘类名’)

元素.('类名')，如果有这个类名就添加，没有就删除

<body>
    <div class="box">文字</div>
    <script>
        // 通过 classList 添加
        // 1. 获取元素
        const box = document.querySelector('.box')
        // 2. 切换类 toggle() 有还是没有 有就删掉，没有就加上
        box.classList.toggle('box')
    </script>
</body>

(‘类名’)

元素.('类名')，看看有没有包含某个类名，如果有则返回true，么有则返回false

<body>
    <div class="box">文字</div>
    <script>
        // 通过 classList 添加
        // 1. 获取元素
        const box = document.querySelector('.box')
        // 2 contains() 有就返回 ture，没有就返回 false
        console.log(box.classList.contains('box')) // true
    </script>
</body>

相关文章