JavaScript Add Class: A Guide

Adding a class property to an element helps the developer create a dynamic user experience on the web page. When a class property is added to an element, that selected element will assume the styling associated with that class name.

Think about a user clicking a button. When the button is clicked, we want a section of the web page to change based on our CSS stylesheet. We can assign a class name associated with that styling to the element in order to change its appearance after the button is clicked. 

Creating an interactive experience is important in any front end programming. In this guide, we will explore two ways to add a class name to a selected element in plain JavaScript. By the end, you will be able to use this tool in your own projects. 

How to Use JavaScript Add Class

In JavaScript, adding a class name can be done in a couple of ways. First, we select the desired HTML element. Then, we have a choice to either use the className property or the add() method to add the class name to the element. We will go through the syntax and use in the next section. 

Remember, we are using plain JavaScript here. No libraries are necessary. Because we are using regular JavaScript, a common practice is to wrap the above logic inside a function and pass that function to an event handler. This will ensure the function to add the class name will happen only after a specific event has occurred. 

As far as HTML elements are concerned, they can have multiple class names. This is useful to remember because we can add class names to elements that already have other class names or ids. All we have to keep in mind is what styling is associated with what class names in our project and add the names to the elements we want to style. 

JavaScript Syntax to Add a Class Name 

We are going to look at two ways to add a class name to an element. Remember from the above section that wrapping the logic to add a class inside a function is a common practice. Once we have our function built, we can call it inside the onClick HTML attribute. 

The first way to add a class name using plain JavaScript is to go through the className property. The logic here is to select the element, then call .className on the selected element. Then we can concatenate the class name to the element. 

Let’s start with our HTML:

<div id="div">
Hello World
</div>
<button>
Add Class
</button>

Here we have a <div> with an id of “div.”  Underneath our <div> is a button. This button will be adding the class name once clicked. Now let’s take a look at an example CSS class. 

.background {
  background-color: blue;
  color: white;
}

In our CSS file, we have the class “background.” Here it will be styled with a blue background color and the text will be white. We want to add the class name “background” to our <div> with the id “div.” 

JavaScript can handle selecting the <div> in a function, like this one:

const addClass = () => {
  const element = document.getElementById('div');
  element.className += "background"
}

Our function called addClass will select the <div> by its id of “div.” We can store that in a variable called element. From here, we call the className property on our variable and concatenate the class name “background.” As a review, concatenation in JavaScript adds the element to a list. In other words, concatenating a class name will add that class name to the element and previously defined classes on that element will still appear.  

We aren’t quite finished yet! We still have to call our addClass function somewhere. Let’s add the class name to our <div> after the button is clicked.

<div id="div">
Hello World
</div>
<button onClick="addClass()">
Add Class
</button>

By using the JavaScript onClick method, we can call our function after the button is clicked. Let’s test it out by clicking the button. 

To review what just happened, we added the class name “background” that was associated with styling in our CSS file. After we built a JavaScript function to find the element and add the class name, the class style was applied to the <div> once the button was clicked. 

JavaScript add() method

Using the same example as above, let’s look at the other way to add a class name. This involves using the JavaScript add() method. Unlike the above example, we use the classList property to call add(). 

Our addClass() function now looks like this:

const addClass = () => {
  const element = document.getElementById('div');
  element.classList.add("background")
}

We are still getting the <div> by its id and storing it in a variable. Then we call the classList property on our variable followed by the add() method. We pass the class name “background” to add() as an argument. 

The <div> now has the class “background” added to it. 

We get the same result by coding it in two different ways. The choice of which one to implement in your code is yours, but the second method is more widely accepted as best practice. Using add() is considered best practice because it is less error prone than using concatenation. 

Conclusion

In this guide, we learned how to add a class name to an element. This is useful when you have a class that is styled in the CSS file. By adding the class name to a specific HTML element, that element inherits the styling found in the CSS file. 

By dynamically changing how elements look on the page, we are able to give the user an interactive experience with our app. When we write interactive applications, it feels natural and engaging to the user. It will keep them coming back to explore our app further.