Tutorials
Books
Videos
Forums
You will often run into situations where you want to alter the look of something using JavaScript. The look of this "something" is often declared using CSS. Instead of debating between using JavaScript or CSS, you can actually do both as described in my Changing CSS Using JavaScript tutorial by fiddling with an element's class value.
In this page, I present you with just the snippet for Adding a Class and Removing a Class.
Below is an example of this snippet running (you can also view it in its own page):
Click on any of the three colored squares to change the color of the text and the background.
Below are the addClass and removeClass functions that take an element along with a class value as their arguments:
function addClass(element, classToAdd) {
var currentClassValue = element.className;
if (currentClassValue.indexOf(classToAdd) == -1) {
if ((currentClassValue == null) || (currentClassValue === "")) {
element.className = classToAdd;
} else {
element.className += " " + classToAdd;
}
}
}
function removeClass(element, classToRemove) {
var currentClassValue = element.className;
// removing a class value when there is more than one class value present
// and the class you want to remove is not the first one
if (currentClassValue.indexOf(" " + classToRemove) != -1) {
element.className = element.className.replace(" " + classToRemove, "");
return;
}
// removing the first class value when there is more than one class
// value present
if (currentClassValue.indexOf(classToRemove + " ") != -1) {
element.className = element.className.replace(classToRemove + " ", "");
return;
}
// removing the first class value when there is only one class value
// present
if (currentClassValue.indexOf(classToRemove) != -1) {
element.className = element.className.replace(classToRemove, "");
return;
}
}
The code for removeClass may seem a little verbose, but most of the work goes into ensuring that removing a class value doesn't alter the spacing between the class values. Class values are nothing more than one giant string with each value separated by a space character.
All of the code just ensures that removing a class ensures that there is a space between each pair of classes. The first class value should not have a space before it. Likewise, the last class value should not have a space after it. All of this applies to the less complicated addClass function as well.
If you have a simpler way of writing this, please do let me know by clicking on the blue floating thing on the left that tells you to ask a question.
The HTML for this example look as follows:
<body id="mainContainer" class="blue"> <div> <p>whenever someone says</p> <p class="bigText"><span class="highlight">go BIG or go home,</span></p> <p class="punchline">I always regret not going <br>home.</p> <div id="colorContainer"> <img id="greenImage" alt="color" height="27" src="images/greenColor.png" width="27"><img id="grayImage" alt="color" height="27" src="images/grayColor.png" width="27"><img id="blueImage" alt="color" height="27" src="images/blueColor.png" width="27"></div> </div> </body>
The relevant style rules that display depending on whether its correspding class value on the element has been set or not can be seen below:
.green {
background-color: #F2FFCA;
color: #418200;
}
.green p.bigText span.highlight {
background-color: #336600;
color: #FFF;
}
.green p.punchline {
color: #336600;
}
.gray {
background-color: #E9E9E9;
color: #666;
}
.gray p.bigText span.highlight {
background-color: #333333;
color: #FFF;
}
.gray p.punchline {
color: #000000;
}
.blue {
background-color: #DAEBF8;
}
.blue p.bigText span.highlight {
background-color: #003366;
color: #FFF;
}
.blue p.punchline {
color: #033147;
}
If you want to know more about this snippet or other clever ways it can be used, check out the following articles:
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
:: Copyright KIRUPA 2024 //--