检查元素是否包含 JavaScript 中的类？

IT技术 javascript html css dom
2021-01-17 03:58:42

使用普通的 JavaScript（不是 jQuery），有没有办法检查一个元素是否包含一个类？

目前，我正在这样做：

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 = "";
}
<div id="test" class="class1"></div>

问题是，如果我将 HTML 更改为此...

<div id="test" class="class1 class5"></div>

...不再有完全匹配，所以我得到的默认输出没有 ( "")。但我还是想输出为I have class1，因为<div>还包含了.class1类。

6个回答

使用方法：element.classList .contains

element.classList.contains(class);

这适用于所有当前浏览器，并且也有支持旧浏览器的 polyfill。

或者，如果您使用较旧的浏览器并且不想使用 polyfills 来修复它们，使用indexOf是正确的，但您必须稍微调整一下：

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

否则，true如果您要查找的类是另一个类名的一部分，您也会得到。

演示

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

它也不那么多余;)

@daGUY：无论如何你想用 switch 语句做什么？例如，第二个div类有两个类，但它只会I have class1在您使用时输出break。如果你想输出一个元素所拥有的每个类，那么你可以className把它分割成空白。或者你的实际目标是什么？
2021-03-13 03:58:42
仅供参考：对于 svg 元素，在 safari 等浏览器中，className 不是字符串而是 svganimatedstring 类型的对象。如果您正在使用 svg 元素，检查 class 属性而不是 className 是当前检查 class 的最跨浏览器的方法。
2021-03-15 03:58:42
太棒了，但是我如何将它与 switch 语句结合使用，以便我可以根据 div 包含的类更改输出？
2021-03-21 03:58:42
@KayceBasques：因为我们还添加了空格，cls以便我们只匹配完整的类名。hasClass(element, 'foo')不应该匹配 class foobar。如果我们不添加空格，element.className我们将永远无法匹配第一个或最后一个类名。
2021-03-29 03:58:42
您在前后添加空格是否有特定原因？
2021-03-31 03:58:42

简单有效的解决方案是尝试.contains方法。

test.classList.contains(testClass);
注意！并非所有浏览器都支持，更多信息请访问：caniuse.com/#feat=classlist
2021-03-18 03:58:42
属性的contains方法element.classList
2021-03-22 03:58:42
这是一个很好的答案，我相信 .contains() 现在有更广泛的支持。
2021-04-10 03:58:42

在现代浏览器中，您可以只使用以下contains方法Element.classList：

testElement.classList.contains(className)

演示

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')
});
<div id="test" class="main main-content content"></div>

支持的浏览器

在此处输入图片说明

（来自CanIUse.com）

填充物

如果你想使用Element.classList，但你也想支持旧的浏览器，可以考虑使用这种填充工具以礼灰色。

元素匹配（）

element.matches(selectorString)

根据MDN 网络文档：

如果元素将被指定的选择器字符串选择，则该Element.matches()方法返回true；否则，返回false。

因此，您可以使用Element.matches()来确定一个元素是否包含一个类。

const element = document.querySelector('#example');

console.log(element.matches('.foo')); // true
<div id="example" class="foo bar"></div>

查看浏览器兼容性

对我来说似乎更干净，更不麻烦，但我很好奇这在性能方面的比较。
2021-03-13 03:58:42
@kasimir.matches慢3-4倍。jsben.ch/iKweE
2021-03-28 03:58:42

由于他想使用 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/>";
    }
}
我只是想知道同样的事情，但是，这是最接近原始问题的！
2021-03-27 03:58:42
其它你可能感兴趣的问题
上一篇如何将 json POST 数据作为对象传递给 Web API 方法？ 下一篇如何显示过滤后的 ng-repeat 数据的长度