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

Question

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

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

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

Answer 1

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

From MDC:

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

Since 2013, you get an extra helping hand.

Many years ago, when this question was first answered, .className was the only real solution in pure JavaScript. Since 2013, all browsers support .classList interface.

JavaScript:

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

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

MDN documentation.

Backwards compatible code:

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

Answer 2

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:

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 classList property, 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 classList is supported by the browser and falls back to the regex-based code otherwise:

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

All modern browsers support the contains method of 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)

---

Polyfill

If you want to use Element.classList and you also want to support ancient browsers like IE8, consider using this polyfill by Eli Grey.

Answer 4

It's the .className property, like this:

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

Answer 5

A better solution than all of these (if you are using HTML5) is to use the 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

toggleClass on element

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

or

el.classList.toggle('class_one');

Answer 7

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

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

If you like to check more than 2 classes in the page then use $('.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 demo