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


当前回答

这有点过时了,但也许有人会发现我的解决方案很有帮助:

// Fix IE's indexOf Array
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement) {
        if (this == null) throw new TypeError();
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) return -1;
        var n = 0;
        if (arguments.length > 0) {
            n = Number(arguments[1]);
            if (n != n) n = 0;
            else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
        }
        if (n >= len) return -1;
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
        return -1;
    }
}
// add hasClass support
if (!Element.prototype.hasClass) {
    Element.prototype.hasClass = function (classname) {
        if (this == null) throw new TypeError();
        return this.className.split(' ').indexOf(classname) === -1 ? false : true;
    }
}

其他回答

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

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

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

要检查元素是否包含类,可以使用元素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

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

希望能有所帮助。

查看这个Codepen链接,可以更快更简单地使用JavaScript检查元素是否具有特定的类~!

hasClass (Vanilla JS)

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