JavaScript 检查元素是否包含类？

使用纯 JavaScript（不是 jQuery），有什么方法可以检查元素是否contains一类？

目前，我正在这样做：

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> still contains the .class1 class.

Use element.classList https://developer.mozilla.org/en-US/docs/DOM/element.classList .contains method:

element.classList.contains(class);

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

或者，如果您使用较旧的浏览器并且不想使用 polyfill 来修复它们，请使用indexOf https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf是正确的，但你必须稍微调整一下：

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

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

DEMO http://jsfiddle.net/fkling/zBKCC/

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

它也更少冗余;)