Add CSS Class To An HTML Element Dynamically Using JavaScript

Learn how to add a class to an element dynamically in JavaScript.

1. Add A Class To A Body Element Using classList.add()
2. Add A Class To A Div Element
3. Add A Class To A Div Element Using setAttribute()
4. Add Multiple Classes To An Element
5. Add A Class To Multiple List Type Elements
6. Add A Class To An Element On Click

1. Add A Class To A Body Element Using classList API

Learn how to add a class to the body element dynamically using JavaScript.

.red { background:red;}

Get the body element by accessing the body property on the document object.

Add .red class to the body element using the add() method on the classList API.

const body = document.body;
body.classList.add("red");

Try it out

See the Pen JavaScript Add Class To Element #1 Body Element by SoftAuthor (@softauthor) on CodePen.

2. Add A Class To A Div Element

Learn how to add a class to a div or any HTML element.

Here is a simple div element with the text box inside.

<div>box</div>

Here is a .box CSS rule.

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

Now add the .box class CSS rule to the div element dynamically using JavaScript.

First, get a DOM reference of the div element using the getElementsByTagName() method on the document object.

Assign it to a constant called boxes.

The boxes constant will have all the div elements of the HTML page as an HTMLCollection, which is an array-type object.

const boxes = document.getElementsByTagName("div");
boxes[0].classList.add("box");

Get the first div element using its index position 0.

Finally, call the add() method passing the .box CSS rule as an argument on the classList API to add the box class to the div element.

Note: If you’re not sure about the index position of the div element, you can also loop through the boxes HTML collection covered in section 5.

Try it out

See the Pen JavaScript Add Class To Element #2 Div Element by SoftAuthor (@softauthor) on CodePen.

3. Add A Class To A Div Element Using setAttribute()

Alternatively, you can also use the setAttribute() method to add a class to an element in JavaScript.

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

The setAttribute() method takes two arguments:

1. attribute name: class
2. attribute value: box

Note: Unlike the add() method of the classList API, the setAttribute() will replace any existing one or more classes with a new class.

Try it out

See the Pen JavaScript Add Class To Element #3 setAttribute() To Div by SoftAuthor (@softauthor) on CodePen.

4. Add Multiple Classes To A Single Element

Using setAttribute() or classList API, you can easily add one or more CSS classes to an HTML Element in JavaScript.

Here is the .orange CSS rule.

.orange {
  background:orange;
}

Using the setAttribute() method: The first argument will always be the keyword class and the second argument is going to be one or more CSS class names separated by a space.

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

Add the .orange class, in addition to the box class, by simply adding multiple classes inside quotes separated by a comma as arguments of the setAttribute() method.

const boxes = document.getElementsByTagName("div");
boxes[0].classList.add("box", "orange"); 

When using classList API, add one or more class names inside quotes separated by a comma as arguments of the add() method.

Note: When you add two classes to an element, and both classes have a background color, whichever class is declared last inside the CSS file takes precedence.

Try it out

See the Pen JavaScript Add Class To Element #3 Multiple Classes by SoftAuthor (@softauthor) on CodePen.

5. Add A Class To Multiple List Type Elements

Learn how to add a CSS class to multiple list-type elements dynamically in JavaScript.

Here are five div elements.

<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> 

Now, get the DOM references of all the div elements using the getElementsByClassName() method.

It will return all of the div element objects as an HTMLCollection.

Assign it to a constant called boxes.

Loop through the boxes HTMLCollection using for-of loop.

Finally, add the .box class to each div element using the classList.add() method on each iteration.

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

for(const box of boxes) {
  box.classList.add("orange"); 
}

Try it out

See the Pen JavaScript Add Class To Element #5 Add Class To Multiple Elements by SoftAuthor (@softauthor) on CodePen.

6. Add A Class To An Element On Click

Learn how to add a class to an element on click dynamically in JavaScript.

Here is the section element with an id box-wrapper.

It has five div elements with the class name box.

<section id="box-wrapper">
  <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>
</section>

Now add .orange class to any clicked element.

First, get a DOM reference of the box-wrapper section element using getElementById()

Assign it to a constant boxWrapper.

Attach a click event to it with the callback function boxPressed.

const boxWrapper = document.getElementById("box-wrapper");

const boxPressed = (e) => {
  if(e.target.nodeName == "DIV") 
     e.target.classList.add("orange");
}

boxWrapper.addEventListener("click", boxPressed);

After that, check to see if the clicked item is a div element using event object (e) that is passed into the boxPressed function.

Get the clicked div element using the target property of the event object.

Finally, add .orange class to the clicked element using the classList.add() method on the e.target.

Try it out

See the Pen JavaScript Add Class To Element #6 Add Class On Click by SoftAuthor (@softauthor) on CodePen.