实现一个函数 toggleClass(element, className)，切换 DOM 元素的类名

推荐答案

function toggleClass(element, className) {
    if (element.classList.contains(className)) {
        element.classList.remove(className);
    } else {
        element.classList.add(className);
    }
}

本题详细解读

题目要求

实现一个函数 toggleClass(element, className)，用于切换 DOM 元素的类名。如果元素已经拥有该类名，则移除它；如果没有，则添加该类名。

实现思路

1. 检查类名是否存在：使用 element.classList.contains(className) 方法检查元素是否已经拥有该类名。
2. 添加或移除类名：
   • 如果类名存在，使用 element.classList.remove(className) 移除该类名。
   • 如果类名不存在，使用 element.classList.add(className) 添加该类名。

代码解析

• element.classList.contains(className)：该方法返回一个布尔值，表示元素是否包含指定的类名。
• element.classList.remove(className)：该方法从元素的类列表中移除指定的类名。
• element.classList.add(className)：该方法向元素的类列表中添加指定的类名。

示例

<div id="myElement" class="initial-class"></div>
<script>
    const element = document.getElementById('myElement');
    toggleClass(element, 'new-class');
    console.log(element.className); // 输出: "initial-class new-class"
    toggleClass(element, 'new-class');
    console.log(element.className); // 输出: "initial-class"
</script>

在这个示例中，toggleClass 函数会切换 myElement 元素的 new-class 类名。第一次调用时，new-class 被添加到类名列表中；第二次调用时，new-class 被移除。