详解原生JS动态添加和删除类

下面就详细讲解一下“详解原生JS动态添加和删除类”的完整攻略。

概述

在前端开发中，动态改变元素的样式是十分常见的需求，其中动态添加类名和动态删除类名就是两种常见的实现方式。通过动态改变元素的类名，可以轻松实现样式的交互效果和动画效果。

动态添加类名

方法一：使用Element.classList方法

Element.classList是DOM API提供的一个属性，它包含了元素的class列表。使用classlist，我们可以轻松对元素的class进行添加、删除和切换操作。

下面是向元素中动态添加类名的示例代码：

// 获取目标元素
const targetElem = document.querySelector('.target');

// 添加类名
targetElem.classList.add('new-class');

在这个示例中，我们首先通过querySelector获取了目标元素，然后使用classList.add()方法向目标元素中添加了一个名为new-class的类名。

方法二：直接修改元素的className属性

Element对象还有一个className属性，它可以读取或设置元素的class属性。通过className属性的操作，我们也可以轻松实现类名的添加：

// 获取目标元素
const targetElem = document.querySelector('.target');

// 添加类名
targetElem.className += 'new-class ';

在这个示例中，我们同样首先获取了目标元素，并通过直接修改className属性向其添加了new-class类名。

动态删除类名

方法一：使用Element.classList方法

要删除类名，我们同样可以使用Element.classList提供的相关方法。相比于添加类名，删除类名只需要调用ClassList.remove()方法即可：

// 获取目标元素
const targetElem = document.querySelector('.target');

// 删除类名
targetElem.classList.remove('old-class');

在这个示例中，我们通过classList.remove()方法删除了目标元素上的一个名为old-class的类名。

方法二：直接修改元素的className属性

与动态添加类名时不同，当我们要删除类名时不能简单地使用+=对className属性进行操作，因为这样会污染元素原先的类名。正确的做法是使用字符串的replace()方法：

// 获取目标元素
const targetElem = document.querySelector('.target');

// 删除类名
targetElem.className = targetElem.className.replace('old-class', '');

在这个示例中，我们同样通过获取目标元素，然后使用字符串的replace()方法，将目标元素上的old-class类名删除了。

示例说明

示例一：动态切换元素的类名

动态切换元素的类名是一种常见的实现样式交互效果的方式。下面的示例中，我们给一个按钮添加了一个点击事件，点击按钮时会让按钮变成红色，再次点击时则会变回原样：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .btn {
                background-color: green;
                color: #fff;
                padding: 10px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
            }
            .btn.active {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button class="btn" id="toggleBtn">
            点击切换样式
        </button>
        <script>
            const toggleBtn = document.getElementById('toggleBtn');
            toggleBtn.addEventListener('click', function() {
                toggleBtn.classList.toggle('active');
            })
        </script>
    </body>
</html>

在这个示例中，我们首先在CSS中定义了两个类名：.btn和.btn.active。.btn类名表示按钮的默认样式，.btn.active表示按钮的激活状态。然后我们给按钮添加了一个click事件，通过按钮的classList.toggle()方法，切换了按钮的active类名，使按钮实现了样式的动态切换。

示例二：动态删除多个类名

当我们需要动态删除多个类名时，可以使用一个循环遍历的方式，依次删除目标元素上的每一个类名。下面的示例中，我们首先定义了一个名为removeClass()的函数，然后在点击按钮时，调用该函数删除元素上的两个类名：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .btn {
                background-color: green;
                color: #fff;
                padding: 10px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
            }
            .btn.active {
                background-color: red;
            }
            .btn.disabled {
                opacity: .5;
                cursor: not-allowed;
            }
        </style>
    </head>
    <body>
        <button class="btn active disabled" id="toggleBtn">
            点击删除多个类名
        </button>
        <script>
            const toggleBtn = document.getElementById('toggleBtn');

            function removeClass(elem, className) {
                // 将目标元素上的类名通过空格分隔为一个数组
                const classNames = elem.className.split(' ');

                // 遍历类名数组，依次删除目标元素上的每一个类名
                for (let i = 0; i < classNames.length; i++) {
                    if (classNames[i] === className) {
                        classNames.splice(i, 1);
                        i -= 1;
                    }
                }

                // 将删除后的类名数组重新拼接成字符串，赋值给目标元素的className属性
                elem.className = classNames.join(' ');
            }

            toggleBtn.addEventListener('click', function() {
                removeClass(toggleBtn, 'active');
                removeClass(toggleBtn, 'disabled');
            })
        </script>
    </body>
</html>

在这个示例中，我们首先在CSS中定义了三个类名：.btn、.btn.active和.btn.disabled。.btn类名是按钮的默认样式，.btn.active表示激活状态，.btn.disabled表示禁用状态。然后我们在按钮上添加了三个类名。当我们点击按钮时，通过调用前面定义好的removeClass()函数，依次删除按钮上的active和disabled两个类名，使按钮恢复到默认样式。在removeClass()函数中，我们首先将元素上的类名通过split()方法分割成一个数组，然后使用循环遍历的方式，依次查找并删除数组中的目标类名，最后使用join()方法将类名数组再次拼接成一个字符串，赋值给目标元素的className属性，完成对类名的删除操作。

以上就是“详解原生JS动态添加和删除类”的完整攻略和两个示例的说明。希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解原生JS动态添加和删除类 - Python技术站