检查具有类的元素是否有另一个类 JavaScript

在 JavaScript 中，我们可以使用 DOM 对象的 classList 属性来操作元素的类。但有时我们需要检查一个元素是否具有另一个类。以下是几种方法来实现这一点。

1. 使用 classList 属性和 contains() 方法

我们可以使用 classList 属性和 contains() 方法来检查一个元素是否具有另一个类。 contains() 方法返回一个布尔值，表示元素是否具有指定的类。

const element = document.querySelector('#myElement');
const hasClass = element.classList.contains('myClass');
if (hasClass) {
  // 元素具有 myClass 类
} else {
  // 元素不具有 myClass 类
}

以上代码中，querySelector() 方法用于获取元素，而 classList.contains() 方法用于检查跟随在括号中的类是否存在于元素的类列表中。如果存在，hasClass 变量将设置为 true，否则将设置为 false。

2. 使用 className 属性和匹配

我们也可以使用 className 属性和字符串匹配来检查元素是否具有另一个类。 className 属性返回一个字符串，其中包含元素的所有类。

const element = document.querySelector('#myElement');
const hasClass = element.className.match(/\bmyClass\b/);
if (hasClass) {
  // 元素具有 myClass 类
} else {
  // 元素不具有 myClass 类
}

以上代码中，querySelector() 方法用于获取元素，而 className.match() 方法用于比较 myClass 类是否存在于元素的类列表中。如果存在，hasClass 变量将设置为 true，否则将设置为 false。

3. 使用 classList 属性和 length 属性

我们还可以使用 classList 属性和 length 属性来检查元素是否具有另一个类。 length 属性返回元素的类列表中类的数量。

const element = document.querySelector('#myElement');
const hasClass = element.classList.length > 0;
if (hasClass) {
  // 元素具有类
} else {
  // 元素不具有类
}

以上代码中，querySelector() 方法用于获取元素，而 classList.length 属性用于检查元素是否具有任何类。如果具有类，hasClass 变量将设置为 true，否则将设置为 false。

总结

这里介绍了三种方法来检查具有类的元素是否有另一个类。使用 classList 属性和 contains() 方法是最常用的方法，但如果您需要比较更多类，那么使用 className 属性和匹配可能更适合您。而使用 classList 属性和 length 属性则可以更快地检查元素是否具有任何类。无论您选择哪种方法，您都可以使用这些方法来轻松地检查元素的类列表。