使用纯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 + '(?: |$)'));
    }

其他回答

在哪个元素中当前是类的。酒吧”?这里有另一个解决方案,但取决于你。

var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string

if (query.match(reg)) { // checks if it matches
  alert('the class .bar is attached to the following Element:\n' + query);
}

jsfiddle演示

当然,这只是查找一个简单的元素<img>(/Image/g),但您可以将所有元素放在一个数组中,如<li> is / li /g, <ul> = / ul /g等。

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>

查看浏览器兼容性

因为.className是一个字符串,你可以使用string includes()方法来检查你的.className是否包含你的类名:

element.className.includes("class1")

如果元素只有一个类名,可以通过获取class属性快速检查。其他答案要健壮得多,但这个肯定有它的用例。

if ( element.getAttribute('class') === 'classname' ) {

}

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