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

Question

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

我尝试了下面的代码，但是由于某种原因它没有起作用...

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

- Florian Müller

---

“class” 在 ECMA 规范中被保留为未来关键字。此外，如果元素具有多个类，则会怎样？ - Matt Ball

Answer 1

要获取整个class属性的值，请使用.className。

来自MDC：

  

className 获取或设置指定元素的 class 属性的值。

自 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...
}

- Greg

---

2016年，我可以使用classList，太棒了 :) - alwe

欢迎来到未来，@alwe。 - Greg

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
}

更新

现代浏览器（除了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);
    };

- Tim Down

---

+1，我也差不多要发这样的内容了。只有一件事，我猜你在 if (hasClass(...)) 的例子中需要传递一个类名（"class_one" 是 OP 想要检查的那个）。 - Christian C. Salvadó

Answer 3

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

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)

---

兼容性补丁

如果你想要使用Element.classList，并且还想支持像IE8这样的古老浏览器，请考虑使用这个兼容性补丁，作者是Eli Grey。

- John Slegers

Answer 4

这是一个.className属性，代码如下：

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

- Nick Craver

---

它假设标签只有一个类（如果您想要更新它，则与classList无关）。 - tereško

@tereško - 这个问题是“如何检查DOM元素的类？”，而不是“如何检查DOM元素是否有类？”...那个问题在别处。 - Nick Craver

嗯，className始终是一个字符串，所以这并不会有什么区别。除非你是jslint。;) - ThiefMaster

@rlemon 在这种情况下，==有什么歧义吗？ - Tim Down

模糊可能不是一个准确的术语。 == 强制我去考虑在本来不需要的时候类型转换，使用严格相等会更加透明，方便未来的你或开发者查看这个语句。我不会说它完全错误，但个人认为在像这样的情况下不应该使用。 - rlemon

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')
  }
}

- AlbertEngelB

---

如果您需要文档，请参考以下链接：http://hacks.mozilla.org/2012/01/hidden-gems-of-html5-classlist/ - AlbertEngelB

Answer 6

如果你正在使用jQuery，那么这个简单的代码就可以帮忙：

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

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

- Syed

Answer 7

在元素上切换toggleClass

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

或者

el.classList.toggle('class_one');

- zloctb

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演示

- oezkany

---

注意hasClass方法：如果一个元素有“show-initial”类，并且你测试“show”类，即使该元素没有这个类，你也会得到true。 - Florian Müller