在JavaScript中检查元素是否包含类?

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

当前回答

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

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

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

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

2021-06-16 00:54:36

其他回答

提示:试着在你的项目中尽可能多地删除jQuery依赖项- VanillaJS。

文档。firstElementChild返回<html>标签，然后classList属性返回添加到它的所有类。

if(document.firstElementChild.classList.contains("your-class")){
    // <html> has 'your-class'
} else {
    // <html> doesn't have 'your-class'
}

2020-02-13 08:54:08

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

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

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

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

2021-06-16 00:54:36

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>

查看浏览器兼容性

2018-11-08 03:56:19

试试这个:

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;
};

2011-05-05 13:48: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

2021-01-11 12:08:45

在JavaScript中检查元素是否包含类?

推荐文章

最新文章

标签