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

Krunal Lathiya is a Software Engineer with over eight years of experience. He has developed a strong foundation in computer science principles and a passion for problem-solving. Krunal has experience with various programming languages and technologies, including PHP, Python, and expert in JavaScript. He is comfortable working in front-end and back-end development.