检查元素是否包含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&nbsp;.contains方法：element.classList.contains(class);这在所有当前的浏览器上都是有效的，而且还存在支持旧浏览器的Poly填充。交替，如果您使用的是旧的浏览器，并且不希望使用复合填充来修复它们，则可以使用indexOf是正确的，但你必须稍微调整一下：function&nbsp;hasClass(element,&nbsp;className)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;('&nbsp;'&nbsp;+&nbsp;element.className&nbsp;+&nbsp;'&nbsp;').indexOf('&nbsp;'&nbsp;+&nbsp;className+&nbsp;'&nbsp;')&nbsp;>&nbsp;-1;}否则你也会得到true如果您要查找的类是另一个类名的一部分。演示jQuery使用类似的(如果不是相同的)方法。应用于该示例：由于它不能与Switch语句一起工作，所以您可以使用以下代码实现同样的效果：var&nbsp;test&nbsp;=&nbsp;document.getElementById("test"), &nbsp;&nbsp;&nbsp;&nbsp;classes&nbsp;=&nbsp;['class1',&nbsp;'class2',&nbsp;'class3',&nbsp;'class4'];test.innerHTML&nbsp;=&nbsp;"";for(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;j&nbsp;=&nbsp;classes.length;&nbsp;i&nbsp;<&nbsp;j;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if(hasClass(test,&nbsp;classes[i]))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test.innerHTML&nbsp;=&nbsp;"I&nbsp;have&nbsp;"&nbsp;+&nbsp;classes[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;}}它也不那么多余；)

Answer 2

简单而有效的解决办法就是尝试.包含方法。test.classList.contains(testClass);

Answer 3

由于他想使用Switch()，我感到惊讶的是，还没有人提出这个问题：var&nbsp;test&nbsp;=&nbsp;document.getElementById("test");var&nbsp;testClasses&nbsp;=&nbsp;test.className.split("&nbsp;"); test.innerHTML&nbsp;=&nbsp;"";for(var&nbsp;i=0;&nbsp;i<testClasses.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;switch(testClasses[i])&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;"class1":&nbsp;test.innerHTML&nbsp;+=&nbsp;"I&nbsp;have&nbsp;class1<br/>";&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;"class2":&nbsp;test.innerHTML&nbsp;+=&nbsp;"I&nbsp;have&nbsp;class2<br/>";&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;"class3":&nbsp;test.innerHTML&nbsp;+=&nbsp;"I&nbsp;have&nbsp;class3<br/>";&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;"class4":&nbsp;test.innerHTML&nbsp;+=&nbsp;"I&nbsp;have&nbsp;class4<br/>";&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:&nbsp;test.innerHTML&nbsp;+=&nbsp;"(unknown&nbsp;class:"&nbsp;+&nbsp;testClasses[i]&nbsp;+&nbsp;")<br/>"; &nbsp;&nbsp;&nbsp;&nbsp;}}