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

当前回答

使用元素。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;
    }
}

它也更少冗余;)

2011-05-05 13:46:49

其他回答

试试这个:

document.getElementsByClassName = function(cl) {
   var retnode = [];
   var myclass = new RegExp('\\b'+cl+'\\b');
   var elem = this.getElementsByTagName('*');
   for (var i = 0; i < elem.length; i++) {
       var classes = elem[i].className;
       if (myclass.test(classes)) retnode.push(elem[i]);
   }
    return retnode;
};

2011-05-05 13:48:15

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

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

在现代浏览器中，您可以只使用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。

2016-01-20 20:54:36

IE8+支持。

首先，我们检查classList是否存在，如果存在，我们可以使用IE10+支持的contains方法。如果我们是在IE9或ie8上，它就会退回到使用正则表达式，它没有那么高效，但是一个简洁的填充。

if (el.classList) {
  el.classList.contains(className);
} else {
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}

或者，如果你正在使用babel编译，你可以简单地使用: el.classList.contains(名称);

2018-07-24 00:41:12

提示:试着在你的项目中尽可能多地删除jQuery依赖项- VanillaJS。

文档。firstElementChild返回<html>标签，然后classList属性返回添加到它的所有类。

if(document.firstElementChild.classList.contains("your-class")){
    // <html> has 'your-class'
} else {
    // <html> doesn't have 'your-class'
}

2020-02-13 08:54:08

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

推荐文章

最新文章

标签