JS 如何检查元素是否包含某个 class 类？

在JavaScript中，可以使用Element.classList属性来检查一个元素是否包含某个class类。classList是一个只读属性，返回元素的类属性的实时DOMTokenList集合。其中的contains()方法可以用来检查集合中是否包含指定的类值。如果包含返回true，否则返回false。

以下是使用classList.contains()方法检查元素是否包含特定class的例子：

javascript
// 假设有一个元素 <div id="myDiv" class="foo bar baz"></div>
var elem = document.getElementById('myDiv');

// 检查元素是否包含class 'foo'
if (elem.classList.contains('foo')) {
  console.log('元素包含class "foo"');
} else {
  console.log('元素不包含class "foo"');
}

// 检查元素是否包含class 'no-such-class'
if (elem.classList.contains('no-such-class')) {
  console.log('元素包含class "no-such-class"');
} else {
  console.log('元素不包含class "no-such-class"');
}

在上面的代码中，我们首先通过document.getElementById获取了ID为myDiv的DOM元素，然后使用classList.contains方法来检查该元素是否包含特定的class。根据这个方法的返回值，我们可以做出相应的处理或反馈。

使用方法：element.classList .contains

shell
element.classList.contains(class);

这适用于所有当前的浏览器，并且也有腻子可以支持旧版浏览器。

---

或者，如果您使用较旧的浏览器并且不想使用polyfills来修复它们，那么使用indexOf是正确的，但您必须稍微调整一下：

shell
function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

true否则，如果您正在查找的类是另一个类名称的一部分，您也会得到。

演示版

jQuery 使用类似（如果不相同）的方法。

---

应用于示例：

由于这不能与 switch 语句一起使用，因此您可以使用以下代码达到相同的效果：

shell
var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

它也更少冗余;)

简单有效的解决方案是尝试**.contains**方法。

shell
test.classList.contains(testClass);

在现代浏览器中，您可以使用以下contains方法Element.classList：

shell
testElement.classList.contains(className)

---

演示

shell
var testElement = document.getElementById('test');

console.log({
    'main' : testElement.classList.contains('main'),
    'cont' : testElement.classList.contains('cont'),
    'content' : testElement.classList.contains('content'),
    'main-cont' : testElement.classList.contains('main-cont'),
    'main-content' : testElement.classList.contains('main-content'),
    'main main-content' : testElement.classList.contains('main main-content')
});

<div id="test" class="main main-content content"></div>

运行代码片段Hide results

展开片段

---

支持的浏览器

（来自CanIUse.com）

---

聚合物填料

如果您想使用Element.classList但也想支持旧版浏览器，请考虑使用Eli Gray的这个 polyfill。

这个问题得到了相当扎实的回答element.classList.contains()，但人们的答案相当夸张，并提出了一些大胆的主张，所以我运行了一个基准测试。

请记住，每个测试都会进行 1000 次迭代，因此大多数测试仍然非常快。除非您在特定操作中广泛依赖于此，否则您不会看到性能差异。

我用基本上所有的方法进行了一些测试。在我的机器上（Win 10、24gb、i7-8700），classList.contains 表现得非常好。 className.split(' ') 也是如此，实际上是相同的。

不过，获胜者是classList.contains().如果您不检查 classList 是否为undefined，~(' ' + v.className + ' ').indexOf(' ' + classToFind + ' ')则会提前 5-15%

Element.matches()

元素.matches(selectorString)

根据MDN 网络文档：

该**Element.matches()**方法返回true该元素是否由指定的选择器字符串选择；否则，返回false。

因此，您可以使用它Element.matches()来确定元素是否包含类。

shell
const element = document.querySelector('#example');

console.log(element.matches('.foo')); // true

<div id="example" class="foo bar"></div>

运行代码片段Hide results

展开片段

查看浏览器兼容性