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

Question

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

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

class is reserved as a future keyword by the ECMAScript specification. Also, what if the element has more than 1 class? — Matt Ball
– Matt Ball, Commented Nov 23, 2010 at 15:23

Greg · Accepted Answer · 2016-02-15 14:31:27Z

53

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

edited Feb 15, 2016 at 14:31

answered Nov 23, 2010 at 15:20

Greg

22k17 gold badges89 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alwe Over a year ago

it is 2016, I can use classList, awesome :)

Greg Over a year ago

Welcome to the future, @alwe

Tim Down · Accepted Answer · 2013-11-20 16:49:33Z

16

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

edited Nov 20, 2013 at 16:49

answered Nov 23, 2010 at 15:33

Tim Down

326k76 gold badges461 silver badges546 bronze badges

1 Comment

Christian C. Salvadó Over a year ago

+1, was about to post something like that. Just one thing, I guess you have to pass a class name ("class_one" is the one that the OP wants to check) in your if (hasClass(...)) example.

John Slegers · Accepted Answer · 2022-04-14 11:13:32Z

6

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.

edited Apr 14, 2022 at 11:13

answered Jan 26, 2017 at 9:35

John Slegers

47.4k23 gold badges205 silver badges173 bronze badges

Comments

Nick Craver · Accepted Answer · 2010-11-23 15:20:04Z

5

It's the .className property, like this:

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

answered Nov 23, 2010 at 15:20

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

8 Comments

Nick Craver Over a year ago

@tereško - what is incorrect about this answer? Keep in mind the question being asked.

tereško Over a year ago

it assumes that tag has only single class (and, in case if you want to update it - has nothing about classList).

Nick Craver Over a year ago

@tereško - the question was "How can I check the class of a DOM element?", not "How do I check if a DOM element has a class?"...that question is elsewhere.

Nick Craver Over a year ago

@tereško - classList doesn't work until IE10, it's not really a feasible option for most. See here: caniuse.com/classlist

ThiefMaster Over a year ago

Well, className is always a string so it won't really make a difference. Unless you are jslint of course. ;)

|

AlbertEngelB · Accepted Answer · 2012-10-05 05:06:21Z

3

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

edited Oct 5, 2012 at 5:06

answered Oct 4, 2012 at 23:22

AlbertEngelB

16.6k15 gold badges69 silver badges97 bronze badges

1 Comment

AlbertEngelB Over a year ago

hacks.mozilla.org/2012/01/hidden-gems-of-html5-classlist Here's some documentation for you if you need it.

zloctb · Accepted Answer · 2016-06-06 08:30:46Z

0

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

answered Jun 6, 2016 at 8:30

zloctb

11.3k10 gold badges78 silver badges92 bronze badges

Comments

Syed · Accepted Answer · 2017-01-22 11:06:14Z

0

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

answered Jan 22, 2017 at 11:06

Syed

16.6k15 gold badges128 silver badges159 bronze badges

Comments

oezkany · Accepted Answer · 2019-06-26 10:34:10Z

0

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

answered Jun 26, 2019 at 10:34

oezkany

2113 silver badges10 bronze badges

1 Comment

Florian Müller Over a year ago

Watch out on hasClass: If an element has class „show-initial“ and you test for class „show“ you‘ll get true even if the element does not have the class.

Collectives™ on Stack Overflow

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

8 Answers 8

Since 2013, you get an extra helping hand.

2 Comments

1 Comment

Demo

Supported browsers

Polyfill

Comments

8 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Since 2013, you get an extra helping hand.

2 Comments

1 Comment

Demo

Supported browsers

Polyfill

Comments

8 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related