How to Add a Class to an Element in JavaScript

by

In web development, sometimes, you need to add a class to an element dynamically. Using JavaScript, you can add a CSS class to the element using many ways but we will see the modern approach which is very easy.

Javascript add class

To add a class to a given element in JavaScript, use the element.classList.add() method. The add() is a built-in JavaScript method of the DOMTokenList Interface for modern browsers that adds the given token to the list.

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

Using classList is a suitable way to access an element’s class list as a space-delimited string via element.className.

If you are only targeting modern browsers, then and then use the element.classList.add() method.

Syntax

element.classList.add("your_class_name");

You can also add multiple classes to your HTML elements.

element.classList.add("class_1", "class_2", "class_3")

Example

Let’s create a CSS file called style.css and add the following code.

.data {
   color: red;
   font-size: 20px;
}

Now let’s write an HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>
    Adding class using JavaScript
  </p>
</body>
</html>

We included a stylesheet using <link> tag.

Now, we will add a class using element.classList.add() method to the <p> element using JavaScript code.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <p>
    Adding class using JavaScript
  </p>
 <script type="text/javascript">
   let p = document.querySelector("p");
   p.classList.add("data");
 </script>
 </body>
</html>

You can see that <script> in which first we have selected an <p> element using document.querySelector() function and then use that variable to add the class “data,” If you run this file in the browser, you will see the following output.

Javascript add class

That’s it. We successfully added a class to the element using element.classList.add() method.

JavaScript remove class

To remove a class from an element in JavaScript, use the element.classList.remove(“class_name”) method.

Example

If we take the above example, then to remove the css of the above text, we will use the remove() function inside the JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="data">
   Adding class using JavaScript
  </p>
  <script type="text/javascript">
   let p = document.querySelector("p");
   p.classList.remove("data");
  </script>
</body>
</html>

Output

Add a Class in JavaScript

You can see that we get the output without CSS effects because we removed a class from the element.

That’s it for this adding a class in JavaScript tutorial.

 

Leave a Comment