Question

检查元素是否包含 JavaScript 中的类？

2011-05-05

1530408

javascript html css dom

使用纯 JavaScript（不是 jQuery），是否有任何方法可以检查元素是否包含类？

目前，我正在这样做：

var test = document.getElementById("test");
var testClass = test.className;

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  case "class2":
    test.innerHTML = "I have class2";
    break;
  case "class3":
    test.innerHTML = "I have class3";
    break;
  case "class4":
    test.innerHTML = "I have class4";
    break;
  default:
    test.innerHTML = "";
}

<div id="test" class="class1"></div>

问题是，如果我将 HTML 更改为此...

<div id="test" class="class1 class5"></div>

...不再有完全匹配，因此我得到的默认输出为空（ “” ）。但我仍然希望输出为 I have class1 ，因为 <div> 仍然包含 .class1 类。

Answer 1

使用 element.classList .contains 方法：

element.classList.contains(class);

这适用于所有当前浏览器，并且还有 polyfill 可以支持旧版浏览器。

或者，如果您使用旧版浏览器并且不想使用 polyfill 来修复它们，使用 indexOf 是正确的，但您必须对其进行一些调整：

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

否则您还会得到 true 如果您要查找的类是另一个类名的一部分。

DEMO

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

应用于示例：

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

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;
    }
}

它也不太冗余 ;)

Answer 2

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

test.classList.contains(testClass);

developer

2015-05-28

Answer 3

在现代浏览器中，您只需使用 Element.classList 的 contains 方法即可：

testElement.classList.contains(className)

演示

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>

支持的浏览器

（来自 CanIUse.com )

Polyfill

如果您想使用 Element.classList 但又想支持旧版浏览器，请考虑使用 此 polyfill ，作者为 Eli Grey 。