How to add remove CSS class dynamically 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.

In this article, we will see how to add or remove the CSS classes to an element using jQuery. To add the CSS classes to an element we use addClass() method, and to remove the CSS classes we use removeClass() method.

Syntax:

• The syntax for adding CSS classes to an element:

  $('selector').addClass(class_name);

• The syntax for Removing CSS classes to an element:

  $('selector').removeClass(class_name);

Example: In the this example, we first create an image element and two buttons, the first button for adding CSS classes and the second button for removing CSS classes. When users click on the first button, the addClass() method is called and the class is added to the image element. When the user clicks on the second button, the removeClass() method is called and the class is removed from the image element.

For the next few weeks, I want to go back-to-basics and look at JavaScript fundamentals. Today, we’re going to look at how to add and remove classes from multiple elements.

Let’s dig in!

An example

Let’s imagine you have some CSS that affects the color of some text, like this.

.color-blue {
	color: blue;
}

.color-purple {
	color: rebeccapurple;
}

And you’ve got some HTML like this.

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

You want to add the .color-blue class to each paragraph element (p), and remove the

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

Let’s look at a few techniques that we can combine to do just that.

Getting all of the elements

To get all of the elements we want to modify, we can use the

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

Here’s a demo.

Adding and removing classes

You can add and remove classes from an element using the

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

It provides a handful of methods you can use to add, remove, toggle, and check for classes on an element. We can use the

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

This method only works on a single element, not a collection of them.

let elem = document.querySelector('p.color-purple');

// Add the .color-blue class
elem.classList.add('color-blue');

// Remove the color-purple class
elem.classList.remove('color-purple');

Here’s another demo.

You can also add or remove multiple classes by passing them in as a comma-separate list.

// Add the .color-blue and .text-large classes
elem.classList.add('color-blue', 'text-large');

Looping through each element

To add and remove classes from multiple elements, we need to loop through each one in the

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

There are many ways to do that, but the two easiest are with the

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

Here’s a

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

// Add the .color-blue class
for (let elem of p) {
	elem.classList.add('color-blue');
}

// Remove the .color-purple class
for (let elem of purple) {
	elem.classList.remove('color-purple');
}

Here’s a demo of the

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

And here’s how you’d do it with the

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

// Add the .color-blue class
p.forEach(function (elem) {
	elem.classList.add('color-blue');
});

// Remove the .color-purple class
purple.forEach(function (elem) {
	elem.classList.remove('color-purple');
});

And here’s a demo of the

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

I generally prefer the

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

However, the

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

<p class="color-purple">Hello</p>
<p>there!</p>
<p class="color-purple">How</p>
<p>are</p>
<p class="color-purple">you?</p>

How to dynamically add and remove class in JavaScript?

How to add CSS class dynamically in JavaScript?

How to remove and add CSS class in JavaScript?

How to remove class name dynamically in JavaScript?