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

使用纯JavaScript(不是jQuery),有没有办法检查元素是否包含类

目前,我正在这样做:

var test=document.getElementById(“test”);
var testClass=test.className;
开关(testClass){
案例“1类”:
test.innerHTML=“我有类别1”;
打破
案例“类别2”:
test.innerHTML=“我有类2”;
打破
“第3类”案件:
test.innerHTML=“我有类3”;
打破
案例“第4类”:
test.innerHTML=“我有类4”;
打破
违约:
test.innerHTML=“”;
}
<div id=“test”class=“class1”&gt&lt/部门&gt

问题是如果我把HTML改成这个

<div id=“test”class=“class1 class5”&gt&lt/部门>

…不再存在精确匹配,因此我得到的默认输出为nothing(“”)。但是我仍然希望输出是我有class1,因为<部门&gt仍然包含.class1

使用元素。类列表。包含方法:

元素.classList.contains(类);

这适用于所有当前浏览器,并且也有支持旧浏览器的多边形填充


或者,如果您使用较旧的浏览器,并且不想使用多边形填充来修复它们,则使用indexOf是正确的,但您必须稍微调整一下:

函数hasClass(元素,类名){
返回(“”+element.className+“”)。indexOf(“”+className+“”)大于-1;
}

否则,如果您要查找的类是另一个类名的一部分,您也将获得true

演示

jQuery使用类似的(如果不是相同的话)方法


应用于示例:

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

var test=document.getElementById("test"),
类别=['class1'、'class2'、'class3'、'class4'];
test.innerHTML=&quot&“;;
对于(var i=0,j=classes.length;i<j;i++){
if(类(测试,类[i])){
test.innerHTML=“我有”+类[I];
打破
}
}

它也不那么冗余;)

发表评论