js 切换类

在 Web 开发中，切换类是一种常见的技术，用于在 HTML 元素间切换类（CSS）。在 JavaScript 中，可以很容易地使用 classList 对象的 add、remove 和 toggle 方法来切换类。在本文中，我们将介绍如何使用这些方法来实现类的切换。

add 方法

add 方法用于向元素添加一个或多个类。它有一个参数，可以是一个或多个类名。

const element = document.querySelector('.my-element');
element.classList.add('active');

上面的代码将在元素 my-element 上添加一个 active 类。

remove 方法

remove 方法用于从元素中删除一个或多个类。它有一个参数，可以是一个或多个类名。

const element = document.querySelector('.my-element');
element.classList.remove('active');

上面的代码将从元素 my-element 中删除 active 类。

toggle 方法

toggle 方法用于切换元素的一个或多个类。它有一个参数，可以是一个或多个类名。如果元素已经包含一个类，则该类将从元素中删除；否则，该类将添加到元素中。

const element = document.querySelector('.my-element');
element.classList.toggle('active');

上面的代码将在元素 my-element 上切换 active 类。

多个类名

add、remove 和 toggle 方法都可以接受多个类名作为参数。

const element = document.querySelector('.my-element');
element.classList.add('active', 'highlight');
element.classList.remove('active', 'highlight');
element.classList.toggle('active', 'highlight');

上面的代码将在元素 my-element 上添加、删除和切换 active 和 highlight 类。

总结

在 JavaScript 中，可以使用 classList 对象的 add、remove 和 toggle 方法来切换类。这些方法非常方便，并使得在 HTML 元素间切换类变得非常容易。