在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(el, cl) {
        return el.classList ? el.classList.contains(cl) : !!el.className && !!el.className.match(new RegExp('(?: |^)' + cl + '(?: |$)'));
    }

2018-05-30 12:22:03

其他回答

试试这个:

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

我为我的网站创建了这些函数，我只使用香草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')

希望能有所帮助。

2019-11-27 08:51:26

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

test.classList.contains(testClass);

2015-05-28 13:14:54

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

要检查元素是否包含类，可以使用元素classList属性的contains()方法:*

element.classList.contains(className);

*假设你有以下元素:

<div class="secondary info">Item</div>*

要检查元素是否包含二级类，可以使用以下代码:

 const div = document.querySelector('div');
 div.classList.contains('secondary'); // true

下面返回false，因为元素没有类错误:

 const div = document.querySelector('div');
 div.classList.contains('error'); // false

2021-01-11 12:08:45

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

推荐文章

最新文章

标签