如何在 JavaScript 中检查 DOM 元素是否包含类？

Question

如何在 JavaScript 中检查 DOM 元素是否包含类？

我尝试了以下代码，但由于某种原因它不起作用......

if (document.getElementById('element').class == "class_one") {
    //code...
}

Answer 1

要获取类属性的完整值，请使用 .className

From MDC：

className 获取和设置指定元素的类属性的值。

自2013年起，你会得到额外的帮助。

许多年前，当这个问题首次得到解答时，.className 是纯 JavaScript 中唯一真正的解决方案。自 2013 年起，所有浏览器都支持 .classList 接口。

JavaScript：

if(document.getElementById('element').classList.contains("class_one")) {
    //code...
}

您还可以使用 classList 做一些有趣的事情，例如 .toggle()、.add() 和 .remove() 。

MDN 文档。

向后兼容代码：

if(document.getElementById('element').className.split(" ").indexOf("class_one") >= 0) {
    //code...
}

Answer 2

您需要的属性是className，而不是class。另外，一个元素可以有很多类，所以如果你想测试它是否有一个特定的类，你需要执行如下操作：

function hasClass(el, clss) {
    return el.className && new RegExp("(^|\\s)" +
           clss + "(\\s|$)").test(el.className);
}

var element = document.getElementById('element');
if ( hasClass(element, "class_one") ) {
    // Do stuff here
}

UPDATE

现代浏览器（几乎所有主要的浏览器，除了 IE <= 9) 支持 classList 属性，如 @Dropped.on.Caprica 的回答中所述。因此，在可能的情况下使用它是有意义的。下面是一些示例代码，用于检测浏览器是否支持 classList 并回退到基于正则表达式的代码：

var hasClass = (typeof document.documentElement.classList == "undefined") ?
    function(el, clss) {
        return el.className && new RegExp("(^|\\s)" +
               clss + "(\\s|$)").test(el.className);
    } :
    function(el, clss) {
        return el.classList.contains(clss);
    };

Answer 3

所有现代浏览器都支持 contains 方法>Element.classList ：

testElement.classList.contains(className)

---

演示

var testElement = document.getElementById('test');

document.body.innerHTML = '<pre>' + JSON.stringify({
    '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')
}, null, 2) + '</pre>';

<div id="test" class="main main-content content"></div>

---

支持的浏览器

（来自 CanIUse.com)

---

Polyfill

如果你想使用 Element.classList 并且您还想支持 IE8 等古老的浏览器，请考虑使用 这个polyfill，作者：Eli Grey< /a>.

Answer 4

它是 .className 属性，如下所示：

if (document.getElementById('element').className == "class_one") {
    //code...
}

Answer 5

比所有这些（如果您使用的是 HTML5）更好的解决方案是使用 classList API。

var element = document.getElementById('some-element');

if (element.classList.contains('class-you-want-to-check')) {
  console.log('element has target class')
} else {
  element.classList.add('class-you-want-to-check');
  element.classList.remove('class-you-want-to-check');
  element.classList.toggle('class-you-want-to-check');

  if (element.classList.contains('class-you-want-to-check')) {
    console.log('Yep, classList is baller')
  }
}

Answer 6

元素上的切换类

var el = document.getElementById('element');
el.classList[['add','remove'][+el.classList.contains('class_one')]]('class_one');

或

el.classList.toggle('class_one');

Answer 7

如果您使用 jQuery，那么这个简单的代码就会有所帮助：

if ($('.yourclass').length) {
  // do something
} 

如果您想检查页面中 2 个以上的类，则使用 $('.yourclass').length > 2

Answer 8

hasClass:

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

containsClass:

function containsClass(element, className) {
  return Array.from(element.classList).filter(function (cls) {
    return cls.indexOf(className) > -1;
  }).length > 0;
}

codepen 演示