Check if CSS class exists without jQuery

Question

Using vanilla javascript or prototype can show me how I can run validation to see if a class exists? For example, I add a class called hideIt with this code:

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

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

 if (overlay.className == "hideIt") 

But this is not good. Any ideas?

Answer 1

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

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

Answer 2

You can use getElementsByClassName() , although this is not supported in all browsers (not in IE and 9):

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

Depending on your browser compatibility requirements, you can use querySelectorAll() :

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

Literature:

• Compatibility for querySelectorAll in Quirksmode .
• querySelectorAll() on the Mozilla Developer Network .
• getElementsByClassName() on the Mozilla Developer Network .
• Compatibility for getElementsByClassName (), in Quirksmode .

Answer 3

 var id = document.getElementById("id"); var classes = id.className.split(" "); if(classes.indexOf("class_name") == -1) { } 

Answer 4

Since the question is asked here, the prototype path ,

 if (overlay.hasClassName('hideIt'))