使用纯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”></部门>
问题是如果我把HTML改成这个
<;div id=“test”class=“class1 class5”></部门>;
…不再存在精确匹配,因此我得到的默认输出为nothing(“”)。但是我仍然希望输出是我有class1,因为<;部门>仍然包含.class1类
使用元素。类列表。包含方法:
元素.classList.contains(类);
这适用于所有当前浏览器,并且也有支持旧浏览器的多边形填充
或者,如果您使用较旧的浏览器,并且不想使用多边形填充来修复它们,则使用indexOf是正确的,但您必须稍微调整一下:
函数hasClass(元素,类名){
返回(“”+element.className+“”)。indexOf(“”+className+“”)大于-1;
}
否则,如果您要查找的类是另一个类名的一部分,您也将获得true
演示
jQuery使用类似的(如果不是相同的话)方法
应用于示例:
由于这不能与switch语句一起使用,因此可以使用此代码实现相同的效果:
var test=document.getElementById(";test";),
类别=['class1'、'class2'、'class3'、'class4'];
test.innerHTML="&“;;
对于(var i=0,j=classes.length;i<;j;i++){
if(类(测试,类[i])){
test.innerHTML=“我有”+类[I];
打破
}
}
它也不那么冗余;)