Как я могу проверить в JavaScript, если элемент DOM содержит класс?

Question

Как я могу проверить в JavaScript, если элемент DOM содержит класс?

Я попробовал следующий код, но по какой-то причине он не работает ...

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

Answer 1

Чтобы получить все значение атрибута класса, используйте .className

От 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
}

ОБНОВЛЕНИЕ

Современные браузеры (в основном все основные, кроме IE <= 9) поддерживают свойство <code>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

Все современные браузеры поддерживают contains метод Element.classList:

testElement.classList.contains(className)

---

Демо

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

document.body.innerHTML = '' + 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) + '

';

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

---

Поддерживаемые браузеры

(из CanIUse.com )

---

Polyfill

Если вы хотите использовать Element.classList и вы также хотите поддерживать древние браузеры, такие как IE8, рассмотрите возможность использования этого полифилла Eli Grey .

Answer 5

Лучшим решением, чем все эти (если вы используете HTML5), является использование API classList.

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

имеет класс:

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

содержит класс:

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

демонстрационный код

Answer 7

Если вы используете jQuery, то вам поможет только этот простой код:

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

Если вы хотите проверить более 2 классов на странице, используйте $('.yourclass').length > 2

Answer 8

toggleClass для элемента

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

или

el.classList.toggle('class_one');