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


当前回答

在现代浏览器中,您可以只使用Element的contains方法。班级名册:

testElement.classList.contains(className)

Demo

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'), 'main main-content' : testElement.classList.contains('main main-content') }); <div id="test" class="main main-content content"></div>


支持的浏览器

(来自CanIUse.com)


Polyfill

如果你想使用Element。classList,但你也想支持旧的浏览器,考虑使用这个polyfill由Eli Grey。

其他回答

我认为完美的解是这个

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

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

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

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

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

使用classList也是理想的

HTML

<div id="box" class="myClass"></div>

JavaScript

const element = document.querySelector("#box");

element.classList.contains("myClass");

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

我为我的网站创建了这些函数,我只使用香草javascript,也许它会帮助到一些人。 首先,我创建了一个函数来获取任何HTML元素:

//return an HTML element by ID, class or tag name
    var getElement = function(selector) {
        var elements = [];
        if(selector[0] == '#') {
            elements.push(document.getElementById(selector.substring(1, selector.length)));
        } else if(selector[0] == '.') {
            elements = document.getElementsByClassName(selector.substring(1, selector.length));
        } else {
            elements = document.getElementsByTagName(selector);
        }
        return elements;
    }

然后是接收要移除的类的函数和元素的选择器:

var hasClass = function(selector, _class) {
        var elements = getElement(selector);
        var contains = false;
        for (let index = 0; index < elements.length; index++) {
            const curElement = elements[index];
            if(curElement.classList.contains(_class)) {
                contains = true;
                break;
            }
        }
        return contains;
    }

现在你可以这样使用它:

hasClass('body', 'gray')
hasClass('#like', 'green')
hasClass('.button', 'active')

希望能有所帮助。