The class name can be used by JavaScript to manipulate the specified element while CSS uses that class name to style that element. Hence, in this post, we will go through how to modify CSS classes in JavaScript but first let us set the environment by initializing elements in HTML and then styling that element in CSS.
Environment Set up
Let us create a div element that works like a container and place two elements inside this container. One will be the h2 tag and the other will be the p tag. To link the CSS file to this HTML we have inserted a link tag in the head and referenced our CSS file inside the href attribute (style.css):
To get the reference of the div element inside CSS, we have used the class attribute. We performed some styling on the div container as well as the elements inside the div container.
background-color: rgb(54, 224, 207);
}
.containerh2, p{
color: rgb(125, 104, 184);
}
The output will look like this:
Modify CSS Classes
As mentioned in the introductory part of this article, JavaScript offers us classList and className properties that can be used to manipulate the class attribute.The className is used to set a value to a class directly whereas using the classList property we can perform the following functions:
- classList.add() is used to add class values
- classList.toggle() is used to turn on or off a class
- classList.replace() is used to replace a class value with another class value
- classList.contains() is used to check whether a value exists or not
- classList.remove() is used to remove a class value
Let us go through an example to better understand the classList property and its built-in methods and we will use the same HTML and CSS code that we used earlier. First, let us use the className property to assign a class to the h2 attribute. For that purpose we have referenced a class in CSS that doesn’t exist at the moment and give it some styling shown below:
background-color: white;
border: 2px solid black;
}
Next, get the reference of the h2 element using the querySelector(‘h2’) which will select the first h2 element in the HTML code. Next, use the className property to assign the info class to the h2 element. The JavaScript code is given below:
const myh2 = document.querySelector('h2');
// Set the info class to myh2
myh2.className = 'info';
To reference this JavaScript code use the script tag with src attribute in the HTML code giving the JavaScript file name in src attribute:
The code.js is our JavaScript file name. Our web page will now look like this:
Let us now modify the CSS classes using the classList property. As seen earlier, the classList property offers us some built-in methods that we can use to modify CSS classes. We will use the classList.add() which will add a class in the following example:
const hideDiv = document.querySelector('div');
hideDiv.classList.add('hidden'); // hidden class added
Next, go to the CSS file and initialize the hidden class by making the display none so that the div is not visible:
display: none;
}
Now you will see that the div element will be hidden and you will not see anything on your webpage:
Let us now use the classList.replace() method where we will replace the existing hidden class with another class wrap.
const hideDiv = document.querySelector('div');
hideDiv.classList.add('hidden'); // hidden class added
hideDiv.classList.replace('hidden', 'wrap'); // replace hidden class with info class
Next, go to your CSS file and style the wrap class:
font-size: large;
}
You will now see that our content is now visible and the font size will be larger than before:
Conclusion
JavaScript offers us two properties that we can use to modify CSS classes; classList and className property. The className property is used to set a value to a CSS class directly whereas the classList gives us some built-in methods to manipulate the CSS classes.
For example, the classList.add() gives us the ability to add class values, classList.remove() gives us the ability to remove a class, classList.toggle() gives us the ability to add toggling to a class and the classList.replace() gives us the ability to replace a class value with another class.
In this post, we saw how to modify CSS classes using JavaScript by learning about two properties of JavaScript; classList and className.
