使用纯JavaScript(不是jQuery)，是否有任何方法来检查元素是否包含类?
目前，我正在这样做:
var test = document.getElementById("test");
var testClass = test.className;
switch (testClass) {
例“class1”:
测试。innerHTML = "我有class1";
打破;
例“class2”:
测试。innerHTML = "I have class2";
打破;
例“class3”:
测试。innerHTML = "I have class3";
打破;
“一年级”情况:
测试。innerHTML = "I have class4";
打破;
默认值:
测试。innerHTML = "";
｝
<div id="test" class="class1"></div>
问题是，如果我把HTML改成这个…
<div id="test" class="class1 class5"></div>
.．.不再有一个精确的匹配，所以我得到的默认输出为nothing("")。但我仍然希望输出为I have class1，因为<div>仍然包含。class1类。
要检查元素是否包含类，可以使用元素classList属性的contains()方法:*
element.classList.contains(className);
*假设你有以下元素:
<div class="secondary info">Item</div>*
要检查元素是否包含二级类，可以使用以下代码:
const div = document.querySelector('div');
div.classList.contains('secondary'); // true
下面返回false，因为元素没有类错误:
const div = document.querySelector('div');
div.classList.contains('error'); // false
在现代浏览器中，您可以只使用Element的contains方法。班级名册:
testElement.classList.contains(className)
Demo
var testElement = document.getElementById('test');
console.log({
'main' : testElement.classList.contains('main'),
'cont' : testElement.classList.contains('cont'),
'content' : testElement.classList.contains('content'),
'main-cont' : testElement.classList.contains('main-cont'),
'main-content' : testElement.classList.contains('main-content'),
'main main-content' : testElement.classList.contains('main main-content')
});
<div id="test" class="main main-content content"></div>
支持的浏览器
(来自CanIUse.com)
Polyfill
如果你想使用Element。classList，但你也想支持旧的浏览器，考虑使用这个polyfill由Eli Grey。
使用元素。contains方法:
element.classList.contains(class);
这适用于所有当前的浏览器，也有支持旧浏览器的腻子。
Alternatively, if you work with older browsers and don't want to use polyfills to fix them, using indexOf is correct, but you have to tweak it a little:
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}
否则，如果您正在寻找的类是另一个类名的一部分，也会得到true。
DEMO
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;
}
}
它也更少冗余;)
