JS动态添加样式类名

className

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

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

classList

classList.add(‘类名’)

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

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

classList.remove(‘类名’)

元素.classList.toggle('类名'),删除指定类名

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

    script>
body>

classList.toggle(‘类名’)

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

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

classList.contains(‘类名’)

元素.classList.contains('类名'),看看有没有包含某个类名,如果有则返回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>

你可能感兴趣的:(javascript)