Posted By

skatan on 08/23/07


Tagged

javascript


Versions (?)

Who likes this?

21 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
unibox
pictofx


addClass, removeClass, hasClass


 / Published in: JavaScript
 

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

  1. function hasClass(ele,cls) {
  2. return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
  3. }
  4.  
  5. function addClass(ele,cls) {
  6. if (!this.hasClass(ele,cls)) ele.className += " "+cls;
  7. }
  8.  
  9. function removeClass(ele,cls) {
  10. if (hasClass(ele,cls)) {
  11. var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
  12. ele.className=ele.className.replace(reg,' ');
  13. }
  14. }
  15.  
  16. //call the functions
  17. addClass(document.getElementById("test"), "test");
  18. removeClass(document.getElementById("test"), "test")
  19. if(hasClass(document.getElementById("test"), "test")){//do something};

Report this snippet  

Comments

RSS Icon 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...

Posted By: Luhring on July 19, 2012

Sorry, the browser returns this:

Or if for some reason that code doesn't display again:

div id="div1" class=" hide"

/div

div2 id="div2" class=" cf makeFull" /div

Side-note: Dude, where is the edit post button.

You need to login to post a comment.