使用普通的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>
…不再存在完全匹配的内容,因此我得到的默认输出为none("")。但我还是想输出为I have class1,因为<div>还 包含 了.class1类。
""
I have class1
<div>
.class1
使用方法:element.classList .contains
element.classList
.contains
element.classList.contains(class);
这适用于所有当前浏览器,并且也有polyfill支持旧版本的浏览器。
或者 ,如果您使用较旧的浏览器,并且不想使用polyfill对其进行修复,则使用indexOf正确,但是您需要对其进行一些调整:
indexOf
function hasClass(element, className) { return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1; }
否则,true如果您正在寻找的班级是另一个班级名称的一部分,您也将获得。
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; } }
它也较少冗余;)