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?

Matt Ball · Accepted Answer · 2011-12-06 19:14:46Z

6

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
}

answered Dec 6, 2011 at 19:14

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

1 Comment

MRVDOG Over a year ago

Best, cleanest and most widely supported answer! :)

David Thomas · Accepted Answer · 2011-12-06 19:22:34Z

6

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:

edited Dec 6, 2011 at 19:22

answered Dec 6, 2011 at 19:16

David Thomas

254k53 gold badges382 silver badges421 bronze badges

2 Comments

Matt Ball Over a year ago

I still think using a regexp on the element's className is the best approach in this case, since they already have a reference to the element itself. Works in all browsers, no feature detection or shims needed.

David Thomas Over a year ago

I tend to agree, but since you'd already covered that angle it didn't seem right including that aspect in my own answer. I wasn't saying that either of these are the best ways, but instead presenting alternatives to those already posted.

Mike · Accepted Answer · 2011-12-06 19:23:01Z

3

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

answered Dec 6, 2011 at 19:23

Mike

1,0421 gold badge8 silver badges14 bronze badges

Comments

clockworkgeek · Accepted Answer · 2011-12-07 23:27:51Z

3

Because the question asks for it here also is the Prototype way,

if (overlay.hasClassName('hideIt'))

answered Dec 7, 2011 at 23:27

clockworkgeek

37.7k9 gold badges92 silver badges127 bronze badges

Collectives™ on Stack Overflow

Check if a CSS class exists without jQuery

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related