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

JavaScript

路易Pro

2020-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类。

第1031篇《检查元素是否包含JavaScript中的类？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答

Tony樱番长 2020.03.12

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

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

null 2020.03.12

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

hasClass（香草JS）

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

飞云古一 2020.03.12

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

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

古一番长小小 2020.03.12

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

泡芙理查德 2020.03.12

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

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

简化的单线：¹

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

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

Jim老丝梅 2020.03.12

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