Posted By

skatan on 08/23/07

Tagged

Versions (?)

Who likes this?

19 people have marked this snippet as a favorite

n00ge
lux
wesbaker
swapnilsarwe
CharlieLaw
rodi01
sarfraznawaz2005
ckayra
seanpowell
jacoborus
dotnetbug
aegony
Kerrick
guo3823538
wirenaught
tonyganch
Luhring
ringo380
o0110o

addClass, removeClass, hasClass

/ Published in: JavaScript

URL: http://www.openjs.com/scripts/dom/class_manipulation.php

Expand | Embed | Plain Text

function hasClass(ele,cls) {
	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
 
function addClass(ele,cls) {
	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
 
function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
    	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
		ele.className=ele.className.replace(reg,' ');
	}
}
 
//call the functions
addClass(document.getElementById("test"), "test");
removeClass(document.getElementById("test"), "test")
if(hasClass(document.getElementById("test"), "test")){//do something};

Report this snippet Tweet

Comments

Subscribe to comments

Posted By: Kerrick on January 14, 2011

I recommend adding this line to the end of addClass()

ele.className.replace(/ +/g,' ');

And changing this line of removeClass()

ele.className=ele.className.replace(reg,' ');

to this:

ele.className=ele.className.replace(reg,'');

Doing so will remove all the extraneous spaces.

Posted By: Ellsass on March 29, 2011

@Kerrick: You actually need to replace it with a space. If you are removing a class that falls between two other classes, replacing it with an empty string will join those other two classes.

Given: elem.className = 'one two three';

Replacing \stwo\s with an empty string results in: elem.className = 'onethree';

Instead, replace with a single space as shown in the original example, and then replace multiple spaces with a single space: elem.className = elem.className.replace(reg,' ').replace(/\s+/g,' ');

Then (in my example) you will be left with elem.className = 'one three';.

You may also want to add .replace(/^\s|\s$/,'') to trim spaces from the very beginning or end of the .className property to take care of classes that were removed from the very beginning or end of the string.

Posted By: Luhring on July 19, 2012

I don't know if I'm messing something up in my code for sure...but for some reason this: var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var failsafe = document.getElementsByClassName('failsafe'); var hide = document.getElementsByClassName('hide'); var listener1 = addEvent(div1,'mouseover',toggleDiv); var listener2 = addEvent(div1,'mouseover',toggleDiv); for (var i=0; i< failsafe.length; i++){ var singleFailsafe = failsafe[i]; } function toggleDiv(){ if(hasClass(div1,'failsafe')&&hasClass(div2,'failsafe')){ //hide div1 by removing the failsafe class // and adding the hide class removeClass(div1,'failsafe') addClass(div1,'hide') //make div2 take up all of the containing div //within branding by removing failsafe and adding makeFull removeClass(div2,'failsafe') addClass(div2,'cf') addClass(div2,'makeFull') }else if(hasClass(div1,'hide')&&hasClass(div2,'makeFull')){ //resize div2 by switching out cf and makeFull to failsafe. removeClass(div2,'makeFull') removeClass(div2,'cf') addClass(div2,'failsafe') //show div1 by switching hide back to failsafe. removeClass(div1,'hide') addClass(div1,'failsafe') } }

in the browser returns this:

notice the 2 spaces added before hide when either the hide class is applied or when the failsafe class is removed. the same thing happens to div 2...it adds 2 spaces before cf but only one space between cf and makeFull (like it's supposed to). I'm relatively new to js but I don't understand the regular expressions thing and I've tried removing all of the spaces in my code and that didn't work...