如何在 JavaScript 中检查给定元素是否具有指定的类？

什么是类？

在JavaScript中，类是一种用于描述对象的特性的构造函数。类允许我们为一组相关的对象定义一个共同的属性和方法集合，这些对象被认为是具有相似特征的。如何在JavaScript中检查一个元素是否具有指定的类呢？

检查元素是否具有指定的类

在JavaScript中，使用classList属性来访问元素的类列表。该属性返回一个DOMTokenList对象，其中包含元素的所有类名。

我们可以使用DOMTokenList的contains方法来检查元素是否具有指定的类。例如，下面的代码检查元素是否具有一个名为“example”的类：

let element = document.getElementById('myElement');
if (element.classList.contains('example')) {
  // Element has class 'example'
} else {
  // Element does not have class 'example'
}

以上代码首先获取一个ID为“myElement”的元素，然后通过classList属性访问该元素的类列表。contains方法接受一个类名作为参数，并返回一个布尔值，指示元素是否包含指定的类。

添加和删除类

除了检查元素是否包含类，我们还可以使用classList对象添加或删除一个类。要添加一个类，我们可以使用add方法。例如，下面的代码向一个名为“myElement”的元素添加一个名为“newClass”的类：

let element = document.getElementById('myElement');
element.classList.add('newClass');

现在，“myElement”元素包含一个名为“newClass”的类。

要删除一个类，我们可以使用remove方法。例如，下面的代码从“myElement”元素中删除一个名为“oldClass”的类：

let element = document.getElementById('myElement');
element.classList.remove('oldClass');

现在，“myElement”元素不再包含一个名为“oldClass”的类。

切换类

有时候我们可能需要在两个类之间切换。例如，我们可能需要在鼠标点击时添加一个类，并在下一次鼠标点击时删除该类。为了实现这一点，我们可以使用classList对象的toggle方法。例如，下面的代码在“myElement”元素上切换一个名为“active”的类：

let element = document.getElementById('myElement');
element.classList.toggle('active');

如果元素当前具有名为“active”的类，那么该类将被删除。否则，该类将被添加。

总结

在本文中，我们介绍了如何在JavaScript中检查一个元素是否具有指定的类。我们使用classList属性来访问元素的类列表，并使用contains方法检查元素是否包含指定的类。我们还介绍了如何添加、删除和切换元素的类，以及如何使用classList对象中提供的其他方法操作元素的类列表。