Add and Remove Classes using JavaScript is quite handy. Even it’s better to use a JavaScript framework or a library for such common tasks and I have mentioned the reason behind doing so at the end of article, these JavaScript code to adding and removing classes are worth considerable.
Let’s do these starting with selecting an element using standard JavaScript way document.getElementById("Id"). While we have used this in our examples, I encourage you to obtain elements using other ways as well as you can simply use this in the right situation.
Change all classes for an element:
Set the className attribute to replace all existing classes with one or more new classes :
1 2 3 | document.getElementById("element1").className = "MyClass1"; document.getElementById("element2").className = "MyClass2 anotherClass"; |
Add an additional class to an element:
Just append a space and the new classname. It will add a class to an element, without removing/affecting existing values.
1 | document.getElementById("element3").className += " MyClass3"; |
Remove a class from an element:
Removing a single class for an element is bit tricky as it uses RegEx to do, so without affecting other potential classes.
1 | document.getElementById("element4").className = document.getElementById("element4").className.replace( /(?:^|\s)MyClass4(?!\S)/g , '' ); |
(?:^|\s) – match the start of the string, or any single whitespace character
MyClass4 – the literal text for the className to remove
(?!\S) – [1] must be end of string or a space. [2] negative lookahead to verify the above is the whole classname. [3] ensures there is no non-space character following
g – flag telling the replace to repeat as required, in case the class name has been added multiple times.
Check if a class is already applied to an element:
Use the same RegEx you used above removing a class to check as to whether a particular class exists to an element:
1 2 3 4 | if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) ) { //Some stuff to do } |
Assigning actions to onclick events to add and remove classes using JavaScript:
Here are the methods you can use to let the events happen.
1. Directly inside the HTML event attributes: Even it is possible to write JavaScript directly inside the HTML event attributes (such as onclick="this.className+=' MyClass'"), this is not recommended. Separating HTML markup from JS interaction logic is described below is better maintainable code.
2. Creating and calling function: You can create a function and call this function in the onclick attribute.
1 2 3 4 5 6 7 8 | <script type="text/javascript"> function alterClass() { // code examples from above } </script> ... <button onclick="alterClass()">Button</button> |
3. move the event out of the HTML: Here we are moving the onclick event out of the HTML to JavaScript through addEventListener:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> function alterClass() { // code examples from above } window.onload = function() { document.getElementById("element").addEventListener( 'click' , alterClass ); } </script> ... <button id="element">My Button</button> |
The window.onload part ensures that the contents of that function are executed after the HTML has finished loading. Omitting this may lead failure of code as element might not exist when the JS is called.
It’s worth mentioning that it will be more appropriate to include the JS in a distinct file instead of writing code in script tags.
This is all about changing class using JavaScript and suitable if application scope is limited. However it’s common practice to use JS framework like AngularJS or library like jQuery to simplify these common tasks. This implementation can benefit us as:
- Fixed bugs and edge cases that you might not think of when writing code.
- Preventing from unusual cross-browser behaviour.
- Saving you from substantial amount of JavaScript work and code maintainability
Look at these two comprehensive articles change class and toggle class to achieve the same using jQuery.
Modern browsers supporting HTML5 also have techniques to add and remove classes using JavaScript without adding any library. I will explain them in upcoming article.