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


当前回答

使用元素。contains方法:

element.classList.contains(class);

这适用于所有当前的浏览器,也有支持旧浏览器的腻子。


Alternatively, if you work with older browsers and don't want to use polyfills to fix them, using indexOf is correct, but you have to tweak it a little:

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

否则,如果您正在寻找的类是另一个类名的一部分,也会得到true。

DEMO

jQuery使用类似的(如果不是相同的)方法。


应用于本例:

因为这不能和switch语句一起工作,你可以用下面的代码达到同样的效果:

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

它也更少冗余;)

其他回答

我知道有很多答案,但其中大多数是额外的函数和额外的类。这是我个人使用的;更干净,代码行更少!

if( document.body.className.match('category-page') ) { 
  console.log('yes');
}

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

Element.matches ()

元素匹配(selectorString)。

根据MDN Web Docs:

如果元素将被指定的选择器字符串选中,则element .matches()方法返回true;否则,返回false。

因此,您可以使用element .matches()来确定元素是否包含类。

const element = document.querySelector('#example'); console.log (element.matches (' . foo '));/ /正确的 <div id="example" class="foo bar"></div>

查看浏览器兼容性

这有点过分,但是如果你有一个触发switch的事件,你可以不使用类:

<div id="classOne1"></div>
<div id="classOne2"></div>
<div id="classTwo3"></div>

你可以这样做

$('body').click( function() {

    switch ( this.id.replace(/[0-9]/g, '') ) {
        case 'classOne': this.innerHTML = "I have classOne"; break;
        case 'classTwo': this.innerHTML = "I have classTwo"; break;
        default: this.innerHTML = "";
    }

});

.replace(/[0-9]/g, ")删除id中的数字。

这有点俗气,但适用于没有额外函数或循环的长开关

使用classList也是理想的

HTML

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

JavaScript

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

element.classList.contains("myClass");