使用纯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类。


当前回答

试试这个:

document.getElementsByClassName = function(cl) {
   var retnode = [];
   var myclass = new RegExp('\\b'+cl+'\\b');
   var elem = this.getElementsByTagName('*');
   for (var i = 0; i < elem.length; i++) {
       var classes = elem[i].className;
       if (myclass.test(classes)) retnode.push(elem[i]);
   }
    return retnode;
};

其他回答

这个问题可以通过element.classList.contains()得到很好的回答,但人们的回答过于夸张,并提出了一些大胆的要求,因此我运行了一个基准测试。

记住,每个测试都要进行1000次迭代,所以大多数测试仍然非常快。除非在特定操作中广泛依赖于此,否则不会看到性能差异。

我用各种方法做了一些测试。在我的机器上,(Win 10, 24gb, i7-8700), classList。Contains表现非常好。className也是。Split(' '),实际上是相同的。

胜出者是classList.contains()。如果你没有检查classList是否未定义,~(' ' + v.className + ' ')。indexOf(' ' + classToFind + ' ')爬行5-15%

要检查元素是否包含类,可以使用元素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.matches ()

元素匹配(selectorString)。

根据MDN Web Docs:

如果元素将被指定的选择器字符串选中,则element .matches()方法返回true;否则,返回false。

因此,您可以使用element .matches()来确定元素是否包含类。

const element = document.querySelector('#example'); console.log (element.matches (' . foo '));/ /正确的 <div id="example" class="foo bar"></div>

查看浏览器兼容性

因为他想使用switch(),我很惊讶没有人提出这个:

var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
    switch(testClasses[i]) {
        case "class1": test.innerHTML += "I have class1<br/>"; break;
        case "class2": test.innerHTML += "I have class2<br/>"; break;
        case "class3": test.innerHTML += "I have class3<br/>"; break;
        case "class4": test.innerHTML += "I have class4<br/>"; break;
        default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
    }
}

简单而有效的解决方法是尝试。包含方法。

test.classList.contains(testClass);