使用 JavaScript 更改元素的类

在编写 Web 应用程序时，我们经常需要更改 HTML 元素的类以更新样式或响应用户操作。在 JavaScript 中，我们可以通过一些方法来更改元素的类。

1. 获取元素

我们需要首先获取要更改类的元素。有很多方法可以获取元素，其中最常用的是 getElementById 和 querySelector。getElementById 将根据元素的 ID 获取元素，而 querySelector 将根据 CSS 选择器获取元素。例如以下代码将获取具有 example ID 的元素：

const element = document.getElementById('example');
// 或
const element = document.querySelector('#example');

2. 更改类

更改元素的类有几种方法。以下是最常用的方法之一：

2.1. classList 属性

每个元素都有一个名为 classList 的属性，它是一个 DOMTokenList 对象，我们可以使用它来轻松地添加、删除和切换类。

2.1.1. 添加类

要向元素添加类，请使用 add 方法。例如，在下面的代码中，我们将 example 元素的类更改为 active：

element.classList.add('active');

2.1.2. 删除类

要从元素中删除类，请使用 remove 方法。例如，在下面的代码中，我们将 example 元素的类更改为 inactive：

element.classList.remove('active');
element.classList.add('inactive');

2.1.3. 切换类

要切换元素的类，请使用 toggle 方法。例如，在下面的代码中，我们将 example 元素的类在 active 和 inactive 之间切换：

element.classList.toggle('active');
element.classList.toggle('inactive');

2.2. className 属性

除了使用 classList 属性外，我们还可以使用 className 属性更改元素的类。例如，在下面的代码中，我们将 example 元素的类更改为 active：

element.className = 'active';

该方法可以很容易地替换所有已有的类，因此在大多数情况下，推荐使用 classList 属性。

总结

以上是使用 JavaScript 更改元素的类的主要方法。我们可以使用 classList 属性轻松地添加、删除和切换类，也可以使用 className 属性更改元素的类。无论哪种方法，都需要先获取到要更改类的元素。