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

Question

使用纯 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 类。

原文由 daGUY 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 element.classList .contains 方法：

 element.classList.contains(class);

这适用于所有当前的浏览器，并且也有支持旧浏览器的 polyfill。

---

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

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

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

演示

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

它也更少冗余；）

原文由 Felix Kling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 test.classList.contains(testClass);

原文由 developer 发布，翻译遵循 CC BY-SA 3.0 许可协议