Change Class Name To An Element In JavaScript

Learn how to change/replace CSS class name to an HTML Element dynamically in JavaScript.

1. Change Class Using className property
2. Change Class Using setAttribtue()
3. Change Class Using classList
4. Change Multiple Class Name To An Element
5. Change A Class Name To Multiple Elements
6. Change Class Name On Click

1. Change Class Name Using className Property

Here is the simple div element with the class name box.

<div class="box">box</div>

Here is the .box and .circle CSS rules.

The div element has a box class inside the HTML and now let’s change it to a circle class using JavaScript.

.box, .circle {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100px;
  height:100px;
  background:#32bacf;
  margin:10px;
  text-align:center;
}

.circle {
  border-radius:50%;
}

.blue {
  background:#32bacf;
}

.orange {
  background:orange;
}

First, get the DOM reference of the div element using its class name box by calling the getElementsByClassName() method on the document object.

Note: You can also use other method to get DOM references such as getElementByID(), getElementsByName, QuerySelector() etc.

Replace the class name .box with .circle using the className property.

Also, change the innerHTML text to circle.

const boxes = document.getElementsByClassName("box");
boxes[0].innerHTML = "circle";
boxes[0].className = "circle";

2. Change Class Name Using setAttribute Method

Similar to the className property, you can use the setAttribute() method to replace the class name from .box to .circle class.

Call the setAttribute() method on the div element object.

It takes two arguments:

1. attribute name: class
2. attribute value: circle (which is the class name)

const boxes = document.getElementsByClassName("box");
boxes[0].setAttribute("class", "circle");

When you use the className property or setAttribute() method, they will replace any existing one or more class names with the new class name(s).

3. Change Class Name Using classList API

Alternatively, the add() method on the classList can also be used to change the value of the class name attribute of the element.

The add() method on the classList object will append a new class to the existing class list instead of replacing it.

For that reason, you’ll need to delete the previous class using the remove() method on the classList object.

const boxes = document.getElementsByClassName("box");
boxes[0].classList.add("circle");
boxes[0].classList.remove("box");

4. Change Multiple Class Names To An Element

Learn how to replace/change multiple class names to an element in JavaScript.

As you can see, the div element has two class names: box and blue.

<div class="box blue">box</div>

Now replace them with circle and orange using classList API.

const boxes = document.getElementsByClassName("box");
boxes[0].classList.add("circle", "orange");
boxes[0].classList.remove("box", "blue");

Using setAttribute() method.

const boxes = document.getElementsByClassName("box");
boxes[0].setAttribute("class", "circle orange");

Using className property.

const boxes = document.getElementsByClassName("box");
boxes[0].className = "circle orange";

5. Change Class Name To Multiple Elements

Learn how to change a class name to multiple elements in JavaScript.

Here are five div elements with the class name box.

Nothing fancy.

<div class="box">div <br>1</div>
<div class="box">div <br>2</div>
<div class="box">div <br>3</div>
<div class="box">div <br>4</div>
<div class="box">div <br>5</div>

Get the DOM reference of all the div elements using the getElementsByTagName() method on the document object.

The getElementsByTagName() method returns all the div elements as an HTMLCollection.

HTMLCollection is array type object and can be iterated using the for…of loop.

const boxes = document.getElementsByTagName("div");
for(const box of boxes) {
  box.classList.add("circle");
  box.classList.remove("box");
}

Inside each iteration, replace the class name of each div element from box to circle.

6. Change Class Name On Click

Let’s change the class name of an element on click.

Here is a simple div with the class name box.

Change the class name box to circle when an element is clicked.

<div class="box">box</div>

Get the DOM reference of the box element using getElementsByClassName() on the document object.

Attach a click event to the element with the call back function boxPressed.

const boxes = document.getElementsByClassName("box");

const boxPressed = (e) => {
  e.target.className = "circle";
}

boxes[0].addEventListener("click", boxPressed);

Inside the callback function, get the currently clicked element using the event object that is passed into the function.

Finally, replace the box with a circle class using the className property on the element object.

Similarly, you can also get an ID of the clicked element in JavaScript.