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