如果DOM元素包含類，我如何檢入JavaScript？

Question

如果DOM元素包含類，我如何檢入JavaScript？

我嘗試了以下代碼，但由於某種原因它不起作用......

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

Answer 1

要獲取類屬性的整個值，請使用.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...
}

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

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

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

Answer 4

比所有這些（如果您使用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 5

所有現代瀏覽器都支持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 Gray的 這個polyfill 。

Answer 6

元素上的toggleClass

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