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


当前回答

只是为那些试图在内联SVG元素中查找类名的人添加答案。

将hasCLass()函数更改为:

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

您需要使用getAttribute()方法来获取类名,而不是使用className属性。

其他回答

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

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

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

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

正如公认的答案所示,元素。className返回一个字符串,所以你可以通过使用indexOf()方法轻松检查类是否存在:

element.className.indexOf('animated') > -1

如果你对indexOf和classList之间的性能差异感兴趣。contains,使用indexOf似乎稍微快一些。我做了一个快速的基准性能测试来验证这一点。以下是我的发现:indexOf vs ClassList.contains。

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

test.classList.contains(testClass);

下面是一个不区分大小写的简单解决方案:

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

只是为那些试图在内联SVG元素中查找类名的人添加答案。

将hasCLass()函数更改为:

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

您需要使用getAttribute()方法来获取类名,而不是使用className属性。