Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
This post will demonstrate two approaches for manipulating the classes of an HTML element. The first uses the plain javascript property classList and the second uses jQuery, a popular javascript library. To begin, consider the following document:
The document has one button with an onclick event to toggle the color of the button. The CSS defines classes to set the background color:
.blue { background: blue; } .red { background: red; }
The only thing left to do is to implement the toggleColor() function in javascript.
Every element has a classList property containing its class attributes. This property provides methods that make it straightforward to add or remove a class.
function toggleColor() { var myButtonClasses = document.getElementById("btn1").classList; if (myButtonClasses.contains("blue")) { myButtonClasses.remove("blue"); } else { myButtonClasses.add("blue"); } if (myButtonClasses.contains("red")) { myButtonClasses.remove("red"); } else { myButtonClasses.add("red"); } }
https://codepen.io/qualitydixon/pen/GoeOOP
The above example uses three methods provided by classList.
An even simpler way to accomplish the same thing is to use the toggle() method. Which will add the provided class if it is not present, or remove it if it is:
function toggleColor() { document.getElementById("btn1").classList.toggle("blue"); document.getElementById("btn1").classList.toggle("red"); }
https://codepen.io/qualitydixon/pen/BjbmQM
When working with multiple classes, simply comma separate the classes in separate strings:
document.getElementById("btn1").classList.toggle("blue”, “bold"); document.getElementById("btn1").classList.toggle("red”, “italics");
The only potential drawback to this approach is it was introduced in HTML5 and may not be supported if you are working with older browsers.
jQuery provides methods that function almost exactly like those shown above, but you get the added bonus of using jQuery’s shorthand for selecting elements. Here is the toggleColor() function written in jQuery:
function toggleColor() { $("#btn1").toggleClass("blue"); $("#btn1").toggleClass("red"); }
https://codepen.io/qualitydixon/pen/KVEyjg?editors=1001
You could also use addClass(), removeClass(), and hasClass() to construct toggleColor() in the same manner as our first example. Note that to add multiple classes simply space separate the classes in the same string. For example:
$("#btn1").toggleClass("blue bold"); $("#btn1").toggleClass("red italics");
That’s it! Now you’re well equipped to dynamically set the appearance of DOM elements. Happy coding!
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareDevelopIntelligence has been in the technical/software development learning and training industry for nearly 20 years. We’ve provided learning solutions to more than 48,000 engineers, across 220 organizations worldwide.
Thank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2022 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.