测试一个元素是否包含一个类？ [英] Test if an element contains a class?

问题描述

使用纯JavaScript（而不是jQuery），是否有一种方法可以测试一个元素是否包含一个类？

目前，我这样做：

HTML：

 
< div id =testclass =class1>< / div> 
 

JS：

 
 var test = document .getElementById（ 测试）; 
 var testClass = test.className; 
 switch（testClass）{
 caseclass1：test.innerHTML =我有class1;打破; 
 caseclass2：test.innerHTML =我有class2;打破; 
 caseclass3：test.innerHTML =我有class3;打破; 
 caseclass4：test.innerHTML =我有class4;打破; 
 default：test.innerHTML =; 
} 
 

这导致了这个输出，这是正确的：

 
我有class1 
 

问题是如果我将HTML更改为... ... p>

 
< div id =testclass =class1 class5>< / div> 
 

...不再有完全匹配，所以我得到的默认输出没有（）。但是我仍然希望输出为我有class1 ，因为< div> still 包含 .class1类。

解决方案

使用 indexOf 是正确的，但你必须稍微调整一下：

  function hasClass（element，cls）{
 return（''+ element.className +''）.indexOf（''+ cls +''）> -1; 
} 
  

否则你也会得到 true 如果你正在寻找的类是另一个类名的一部分。

演示

jQuery使用类似的（如果不一样）的方法。 b
$ b

---

另外，如果您使用的浏览器支持 element.classList ，你可以使用它的 .contains 方法：

  element.classList.contains（cls）; 
  

对于跨浏览器兼容性（特别是对于IE），您可能仍然想创建一个 hasClass 函数，并进行测试。

---

应用于例如：

由于这与switch语句不能一起工作，您可以使用以下代码实现相同的效果：

  var test = document.getElementById（test），
 classes = ['class1'，'class2'，'class3'，'class4' ]。 
 
 test.innerHTML =;对于（var i = 0，j = classes.length; i< j; i ++）{
 if（hasClass（test，classes [i]））{
 test.innerHTML =我有+类[i]; 
 break; 
} 
} 
  

它的冗余也少;）

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.

DEMO

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屋！