CODEWITHSUNDEEP
javascripthtmlcssdomhtmlelements
Florian Müller
Florian Müller

Reputation: 7785

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

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

Upvotes: 26

Views: 64187

Answers (8)

John Slegers
John Slegers

Reputation: 47091

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

enter image description here

(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.

Upvotes: 6

oezkany
oezkany

Reputation: 211

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

Upvotes: 0

Syed
Syed

Reputation: 16513

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

Upvotes: 0

zloctb
zloctb

Reputation: 11177

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

Upvotes: 0

Greg
Greg

Reputation: 21909

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

Upvotes: 53

Tim Down
Tim Down

Reputation: 324567

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

Upvotes: 16

AlbertEngelB
AlbertEngelB

Reputation: 16436

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

Upvotes: 3

Nick Craver
Nick Craver

Reputation: 630399

It's the .className property, like this:

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

Upvotes: 5

Related Questions