测试一个元素是否包含一个类? [英] Test if an element contains a class?
问题描述
使用纯JavaScript(不是jQuery),是否有一种方法可以测试元素是否包含一个类?
,我这样做:
HTML:
< div id =testclass =class1>< / div>
JS:
var test = document .getElementById(test);
var testClass = test.className;
switch(testClass){
caseclass1:test.innerHTML =我有class1;打破;
caseclass2:test.innerHTML =我有class2;打破;
caseclass3:test.innerHTML =我有class3;打破;
caseclass4:test.innerHTML =我有class4;打破;
默认值:test.innerHTML =;
}
这将导致此输出是正确的:
我有class1
问题是如果我将HTML更改为此...
< div id =testclass =class1 class5>< / div>
...不再有完全匹配,所以我得到默认输出为无( / code>)。但我仍然希望输出
我有class1
,因为< div>
JavaScript / Reference / Global_Objects / String / indexOf> indexOf
是正确的,但你必须稍微调整一下:
函数hasClass(element,cls){
return(''+ element.className +'').indexOf(''+ cls +'') > -1;
}
否则也会得到 true
如果你正在寻找的类是另一个类名的一部分。
jQuery使用类似(如果不是相同的)方法。
或,如果您使用支持 element.classList
,您可以使用 .contains
方法:
element.classList.contains(cls);
对于跨浏览器兼容性(尤其是IE),您可能还需要创建 hasClass
函数,并在其中进行测试。
示例:
由于这不能与switch语句一起使用,因此您可以使用此代码实现相同的效果:
var test = document.getElementById(test),
classes = ['class1','class2','class3','class4' ];
test.innerHTML =;
for(var i = 0,j = classes.length; i if(hasClass(test,classes [i])){
test.innerHTML =我有+类[i];
break;
}
}
b $ b
Using plain JavaScript (not jQuery), is there a way I can test to see if an element contains a class?
Currently, I'm doing this:
HTML:
<div id="test" class="class1"></div>
JS:
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 = ""; }
This results in this output, which is correct:
I have class1
The issue is that if I change the HTML to this...
<div id="test" class="class1 class5"></div>
...there's no longer an exact match, so I get the default output of nothing (""
). But I still want the output to be I have class1
because the <div>
still contains the .class1 class.
Using indexOf
is correct, but you have to tweak it a little:
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
Otherwise you will also get true
if the class you are looking for is part of another class name.
jQuery uses a similar (if not the same) method.
Alternatively, if you work with a browser which supports element.classList
, you can use its .contains
method:
element.classList.contains(cls);
For cross-browser compatibility (especially for IE) you might still want to create a hasClass
function and make the test in there.
Applied to the example:
As this does not work together with the switch statement, you could achieve the same effect with this code:
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;
}
}
It's also less redundant ;)
这篇关于测试一个元素是否包含一个类?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!