In JavaScript, manipulating the DOM is one of the most common processes through which developers modify the HTML document to change the display and in some cases, even functionality of pages in a browser. One of the key methods to manipulate the DOM is toggling a class of an element. In this article, we are going to take a look at 3 quick and easy ways we can toggle a class of an element.
1. The toggle() method
This method is probably the most popular one. Here, we use the classList property. Let’s see how it works with an example. Let’s say we have the following HTML –
|
1 2 3 4 5 6 |
<div class="my-html"> <p>Lorem ipsum dolor sit amet</p> <button type="button" class="toggle-btn">Toggle Color</button> </div> |
It should be looking something like this –
Here, we have a simple div tag with class .my-html and a button. We use this button to toggle the class of our .my-html element. Add the following CSS –
|
1 2 3 4 5 |
.sea-green { color: seagreen; } |
Now we need to set up the button to add .sea-green class to our .my-html element using JavaScript.
|
1 2 3 4 5 6 7 |
const myHTML = document.querySelector('.my-html'); const btn = document.querySelector('.toggle-btn'); btn.addEventListener('click', () => myHTML.classList.toggle('sea-green')); |
Pretty basic stuff. Here, we are just listening to the button and toggle the class .sea-green on myHTML element.
On clicking the button, notice that the color of text changes.
This is because of addition of the .sea-green class to myHTML . If you Inspect the element, it should look something like this –
On further clicking, we notice that class gets toggled.
2. The className property
In this method, we make use of the className property. This property returns the class attribute as a string. In order to toggle class in JavaScript using className property, we need to modify the JS code –
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const myHTML = document.querySelector('.my-html'); const btn = document.querySelector('.toggle-btn'); btn.addEventListener('click', () => { if (!myHTML.className.includes('sea-green')) { myHTML.className += ' sea-green'; } else { myHTML.className -= 'sea-green'; } }); |
In the code above, we make use of the className property of myHTML to check if it contains the sea-green class. For this, we utilized the includes() method to check for the presence of a substring in a string.
In case the check returns false, we append sea-green to our className string but if it returns true, we remove it.
3. The contains() method
Another method we can use to toggle a class is the contains() method. This method checks if a certain class is present in an element. From our initial example, let’s modify the JS to utilize the contains() method to toggle the sea-green class –
|
1 2 3 4 5 6 7 8 9 10 11 |
®const myHTML = document.querySelector('.my-html'); const btn = document.querySelector('.toggle-btn'); btn.addEventListener('click', () => { if (!myHTML.classList.contains('sea-green')) { myHTML.classList.add('sea-green'); } else { myHTML.classList.remove('sea-green'); } }); |
In the code above, we check whether myHTML contains .sea-green class or not using contains() method. In case the class is not there, we add it using add() method. If class is there, we remove it using the remove() method.
Conclusion
So, this was it! We saw how can we can toggle class of an element in JavaScript. First, we used the toggle() method which toggles a single class. Then we took a look at the className property which returns a string of classes separated by a space. We can manipulate this property to toggle a class. In the end, we saw how we can toggle an element’s class using the contains() method. This method is preferred in case we need to add some additional functionality apart from a simple class toggle.
Hope you were able to learn something new from this article. If you would like to learn more about WordPress and Web Development, make sure to check out our blog. See you in the next article!
