如何在 JavaScript 中删除一个类

在 JavaScript 中，我们可以使用 classList 属性来操作元素的类，比如添加、删除、切换等等。下面来介绍如何通过 classList 删除一个类。

基本用法

要删除一个类，我们可以使用 classList.remove() 方法。这个方法接收一个类名作为参数，表示要删除哪个类。例如：

// 获取一个元素
const element = document.getElementById('my-element');

// 删除一个类
element.classList.remove('my-class');

这样就可以删除 my-class 类了。注意，如果元素本身没有这个类，调用 remove() 方法也不会有什么效果。

删除多个类

如果要删除多个类，可以顺序调用 remove() 方法，每次传入一个类名：

// 删除多个类
element.classList.remove('class-1');
element.classList.remove('class-2');
element.classList.remove('class-3');

这样一个一个地删除类也很麻烦，可以使用 arguments 和 forEach 来简化操作：

// 一次删除多个类
element.classList.remove('class-1', 'class-2', 'class-3');

删除所有类

如果要删除一个元素的所有类，可以使用 classList 的 value 属性：

// 删除所有类
element.className = '';

这样可以删除元素的所有类，但是也会把其他的属性值一并清空。而且如果元素之后又添加了类，之前清空的类也无法恢复。

封装成函数

为了方便地在代码中删除一个类，可以封装成一个函数：

function removeClass(element, ...classNames) {
  element.classList.remove(...classNames);
}

这个函数接收一个元素和一个或多个类名，使用 ... 表示剩余参数，可以方便地传入任意个数的类名。然后使用 classList.remove() 方法删除这些类。调用这个函数的方式为：

const element = document.getElementById('my-element');
removeClass(element, 'my-class');

结论

这样就介绍完了如何在 JavaScript 中删除一个类。记得使用 classList.remove() 方法来删除单个或多个类，使用 className 属性来删除所有类。可以封装成函数来方便地使用。