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

当前回答

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

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

2011-05-05 13:57:07

其他回答

我将保利填充classList功能，并使用新的语法。这样，新的浏览器将使用新的实现(速度快得多)，只有旧的浏览器会受到代码的性能影响。

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

2014-01-15 19:05:49

对我来说，最优雅、最快速的实现方法是:

function hasClass(el, cl) {
        return el.classList ? el.classList.contains(cl) : !!el.className && !!el.className.match(new RegExp('(?: |^)' + cl + '(?: |$)'));
    }

2018-05-30 12:22:03

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

test.classList.contains(testClass);

2015-05-28 13:14:54

我认为完美的解是这个

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

2014-01-06 09:17:23

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

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

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

2021-02-10 20:25:04

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

推荐文章

最新文章

标签