Check if an element contains a class in JavaScript?

Check if an element contains a class in JavaScript?

Using plain JavaScript (not jQuery), Is there any way to check if an element contains a class?
Currently, I’m doing this:

var test = document.getElementById(“test”);
var testClass = test.className;

switch (testClass) {
case “class1”:
test.innerHTML = “I have class1”;
break;
case “class2”:
test.innerHTML = “I have class2”;
break;
case “class3”:
test.innerHTML = “I have class3”;
break;
case “class4”:
test.innerHTML = “I have class4”;
break;
default:
test.innerHTML = “”;
}

The issue is that if I change the HTML to this…

…there’s no longer an exact match, so I get the default output of nothing (“”). But I still want the output to be I have class1 because the

still contains the .class1 class.

Solutions/Answers:

Solution 1:

Use element.classList .contains method:

element.classList.contains(class);

This works on all current browsers and there are polyfills to support older browsers too.


Alternatively, if you work with older browsers and don’t want to use polyfills to fix them, using indexOf is correct, but you have to tweak it a little:

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

Otherwise you will also get true if the class you are looking for is part of another class name.

DEMO

jQuery uses a similar (if not the same) method.


Applied to the example:

As this does not work together with the switch statement, you could achieve the same effect with this code:

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

It’s also less redundant 😉

Solution 2:

The easy and effective solution is trying .contains method.

test.classList.contains(testClass);

Solution 3:

In modern browsers, you can just use the contains method of Element.classList :

testElement.classList.contains(className)

Demo

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

console.log({
    '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')
});
<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 but you also want to support older browsers, consider using this polyfill by Eli Grey.

Solution 4:

Since he wants to use switch(), I’m surprised no one has put this forth yet:

var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
    switch(testClasses[i]) {
        case "class1": test.innerHTML += "I have class1<br/>"; break;
        case "class2": test.innerHTML += "I have class2<br/>"; break;
        case "class3": test.innerHTML += "I have class3<br/>"; break;
        case "class4": test.innerHTML += "I have class4<br/>"; break;
        default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
    }
}

Solution 5:

Here is a little snippet If you’re trying to check wether element contains a class, without using jQuery.

function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

Solution 6:

A simplified oneliner:1

function hasClassName(classname,id) {
 return  String ( ( document.getElementById(id)||{} ) .className )
         .split(/\s/)
         .indexOf(classname) >= 0;
}

1 indexOf for arrays is not supported by IE (ofcourse). There are plenty of monkey patches to be found on the net for that.