如果 DOM 元素包含一个类，我如何检查 JavaScript？

How can I check in JavaScript if a DOM element contains a class?

提问by Florian Müller

How can I check in JavaScript if a DOM element contains a class?

如果 DOM 元素包含一个类，我如何检查 JavaScript？

I tried the following code, but for some reason it doesn't work...

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

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

回答by Greg

To get the whole value of the class atribute, use .className

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

From MDC:

来自 MDC：

className gets and sets the value of the class attribute of the specified element.

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

Since 2013, you get an extra helping hand.

自 2013 年以来，您将获得额外的帮助。

Many years ago, when this question was first answered, .classNamewas the only realsolution in pure JavaScript. Since 2013, all browsers support.classListinterface.

许多年前，当这个问题第一次被回答时，.className是纯 JavaScript 中唯一真正的解决方案。自 2013 年以来，所有浏览器都支持.classList界面。

JavaScript:

JavaScript：

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

You can also do fun things with classList, like .toggle(), .add()and .remove().

你也可以做有趣的事情有classList，像.toggle()，.add()和.remove()。

MDN documentation.

MDN 文档。

Backwards compatible code:

向后兼容代码：

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

回答by Tim Down

The property you need is className, not class. Also, an element can have many classes, so if you want to test if it has a particular class you need to do something like the following:

您需要的属性是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

更新

Modern browsers (pretty much everything major except IE <= 9) support a classListproperty, as mentioned in @Dropped.on.Caprica's answer. It therefore makes sense to use this where available. Here's some example code that detects whether classListis supported by the browser and falls back to the regex-based code otherwise:

classList正如@Dropped.on.Caprica 的回答中提到的那样，现代浏览器（除了 IE <= 9 之外几乎所有主要浏览器）都支持一个属性。因此，在可用的情况下使用它是有意义的。下面是一些示例代码，用于检测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);
    };

回答by Nick Craver

It's the .classNameproperty, like this:

这是.className财产，像这样：

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

回答by John Slegers

All modern browsers support the containsmethod of Element.classList:

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

testElement.classList.contains(className)

---

---

Demo

演示

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>

---

---

Supported browsers

支持的浏览器

(from CanIUse.com)

（来自CanIUse.com）

---

---

Polyfill

填充物

If you want to use Element.classListand you also want to support ancient browsers like IE8, consider using this polyfillby Eli Grey.

如果你想使用Element.classList，你也想支持古老的浏览器IE8一样，可以考虑使用这种填充工具以礼灰色。

回答by AlbertEngelB

A better solution than all of these (if you are using HTML5) is to use the classList API.

比所有这些（如果您使用 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')
  }
}

回答by zloctb

toggleClass on element

元素上的toggleClass

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

or

或者

el.classList.toggle('class_one');

回答by Syed

If you are using jQuery then just this simple code will help:

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

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

If you like to check more than 2 classes in the page then use $('.yourclass').length > 2

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

回答by oezkany

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 demo

代码笔演示