How to dynamically create and apply CSS class in JavaScript ?
In this article, we will see how to dynamically create a CSS class and apply it to the element dynamically using JavaScript. To do that, first, we create a class and assign it to HTML elements on which we want to apply CSS property. We can use className and classList properties in JavaScript.
Approach:
The className property is used to add a class in JavaScript. It overwrites existing classes of the selected elements. If we don’t want to overwrite then we have to add a space before the class name.
// It overwrites existing classes var h2 = document.querySelector("h2"); h2.className = "test"; // Add new class to existing classes // Note space before new class name h2.className = " test";
The classList property is also used to add a class in JavaScript but it never overwrites existing classes and adds a new class to the selected elements class list.
// Add new class to existing classes var p = document.querySelector("p"); p.classList.add("test");
After adding new classes to the elements, we select the new class(test) and then apply CSS properties to it, with the help of style property in JavaScript.
// Select all elements with class test var temp = document.querySelectorAll(".test"); // Apply CSS property to it for (var i = 0; i < temp.length; i++) { temp[i].style.color = "white"; temp[i].style.backgroundColor = "black"; }
Example: Below is the implementation of this:
HTML
< h2 class = "hello" > Welcome to gfg </ h2 > < p id = "hi" >Hi it's me.</ p > < button onclick = "apply()" > Apply css dynamically </ button > < script > function apply() { // It overwrites existing classes var h2 = document.querySelector("h2"); h2.className = "test"; // Add new class to existing classes var p = document.querySelector("p"); p.classList.add("test"); // Select all elements with class test var temp = document.querySelectorAll(".test"); // Apply CSS property to it for (var i = 0; i < temp.length ; i++) { temp[i] .style.color = "green" ; temp[i] .style.fontSize = "40px" ; } } </script> |
Output:

Dynamically create and apply CSS class
Please Login to comment...