Check if a CSS class exists without jQuery

Question

Using vanilla javascript or prototype can someone show me how I could run a check to see if a class exists? For example I am adding a class called hideIt with this code :

var overlay = document.getElementById("overlay_modal");
overlay.className += " hideIt";

I also need a script that later can check to see if hideIt exists. I have tried things like :

if (overlay.className == "hideIt")

But that is no good. Any ideas?

Answer 1

Use a regexp. \b will match word boundaries (a space, a newline character, punctuation character or end of string).

var overlay = document.getElementById("overlay_modal");
if (overlay.className.match(/\bhideIt\b/)) 
{
    // frob a widget
}

Answer 2

You could use getElementsByClassName(), albeit this isn't supported in all browsers (not in IE < 9):

if (!document.getElementsByClassName('classname').length){
    // class name does not exist in the document
}

else {
    // class exists in the document
}

You could, depending on browser compatibility requirements, use querySelectorAll():

if (document.querySelectorAll('#overlay_modal.hideIt')) {
    // the element with id of overlay_modal exists and has the class-name 'hideIt'
}

References:

• Compatibility for querySelectorAll at Quirksmode.
• querySelectorAll() at Mozilla Developer Network.
• getElementsByClassName() at Mozilla Developer Network.
• Compatibility for getElementsByClassName(), at Quirksmode.