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

路易Pro2020-03-12

使用普通的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>

...不再存在完全匹配的内容，因此我得到的默认输出为none（""）。但我还是想输出为I have class1，因为<div>还包含了.class1类。

Tony樱番长2020/03/12 14:59:24

我认为完美的解决方案将是这样

if ($(this).hasClass("your_Class")) 
    alert("positive");            
else              
    alert("Negative");

2020/03/12 14:59:24

请参阅此Codepen链接，以使用vanilla JavaScript〜轻松快捷地检查元素是否具有特定类的方式！

hasClass（香草JS）

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

飞云古一2020/03/12 14:59:24

我将使用Poly填充classList功能并使用新语法。这样，较新的浏览器将使用新的实现（速度要快得多），只有旧的浏览器才能从代码中获得性能上的优势。

https://github.com/remy/polyfills/blob/master/classList.js

古一番长小小2020/03/12 14:59:23

className只是一个字符串，因此您可以使用常规的indexOf函数查看类列表是否包含另一个字符串。

泡芙理查德2020/03/12 14:59:23

这是一个不区分大小写的简单解决方案：

function hasClass(element, classNameToTestFor) {
    var classNames = element.className.split(' ');
    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) {
            return true;
        }
    }
    return false;
}

老丝猪猪小卤蛋2020/03/12 14:59:23

简化的单线：¹

function hasClassName(classname,id) {
 return  String ( ( document.getElementById(id)||{} ) .className )
         .split(/\s/)
         .indexOf(classname) >= 0;
}

indexOfIE（当然）不支持数组¹。在网上可以找到很多猴子补丁。

Jim老丝梅2020/03/12 14:59:23

由于他想使用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/>";
    }
}

Gil宝儿2020/03/12 14:59:23

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

test.classList.contains(testClass);

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer