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

Question

检查元素是否包含JavaScript中的类？  使用普通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);

这在所有当前的浏览器上都是有效的，而且还存在支持旧浏览器的Poly填充。

---

交替，如果您使用的是旧的浏览器，并且不希望使用复合填充来修复它们，则可以使用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;
    }}

它也不那么多余；)

Answer 2

简单而有效的解决办法就是尝试.包含方法。

test.classList.contains(testClass);

Answer 3

由于他想使用Switch()，我感到惊讶的是，还没有人提出这个问题：

var test = document.getElementById("test");var testClasses = test.className.split(" ");
test.innerHTML = "";for(var i=0; i<testClasses.length; i++) {
    switch(testClasses[i]) {
        case "class1": test.innerHTML += "I have class1<br/>"; break;
        case "class2": test.innerHTML += "I have class2<br/>"; break;
        case "class3": test.innerHTML += "I have class3<br/>"; break;
        case "class4": test.innerHTML += "I have class4<br/>"; break;
        default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
    }}