JavaScript adding a class name to the element
Last Updated :
10 Jan, 2025
In JavaScript, adding a class name to an element allows you to style or manipulate it via CSS or JavaScript. This can be achieved using different methods. Here, we'll explore two common approaches: using the .className property and the .add() method.
Below are the different approaches that could be used to add a class name to the element:
Approach 1: Using className property
The className property allows you to set or return the class name(s) of an HTML element. You can use this property to add a single class or multiple classes (separated by a space).
Syntax:
// It is used to set the className property.
element.className = "newClass";
// It is used to return the className property.
element.className;
Property Value:
- newClass: It specifies the element's class name. For applying multiple classes, it needs to separate by space.
Return value: It is of string type which represents the class or list of classes of elements with space-separated.
Example: This example uses the .className property to add a class name.
HTML
<!DOCTYPE html>
<html>
<head>
<title>JavaScript to add class name</title>
<style>
.addCSS {
color: green;
font-size: 25px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="p">
A Computer Science portal for Geeks.
</p>
<button onclick="addClass()">
AddClass
</button>
<!-- Script to add class name -->
<script>
function addClass() {
let v = document.getElementById("p");
v.className += "addCSS";
}
</script>
</body>
</html>
Output:
.className PropertyApproach 2: Using .add() method
The .add() method method is a part of the classList API, which provides a more flexible way to manage an element's classes. It adds a class to the element without affecting any other classes the element may already have.
Syntax:
element.classList.add("newClass");Example: This example uses .add() method to add the class name.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Adding a class
name to the element
</title>
<style>
.addCSS {
background-color: green;
color: white;
padding: 20px;
font-size: 25px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="p">
A Computer Science portal for Geeks.
</p>
<button onclick="addClass()">
AddClass
</button>
<!-- Script to add class name -->
<script>
function addClass() {
let elem = document.getElementById("p");
elem.classList.add("addCSS");
}
</script>
</body>
</html>
Output:
.add() MethodDifferences Between .className and .add():
.className:
- Overwrites any existing classes on the element.
- Suitable when you want to replace or reset all classes on the element.
.classList.add():
- Adds a new class without removing existing classes.
- Ideal for appending a class while preserving others.
Both .className and .classList.add() are effective ways to add classes to HTML elements using JavaScript. If you want to overwrite all existing classes, use .className. However, if you need to add a class without affecting other classes, use .classList.add() for more flexibility and control.
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
Similar Reads
Change an Element Class with JavaScript Here are two different ways to change the element class with JavaScript.1. Using .className PropertyIn this approach, we are using document.getElementById() method to get access to the element for which we want to change the class name then we use using .className property on that selected element t
2 min read
How to Add a Class to DOM Element in JavaScript? Adding a class to a DOM (Document Object Model) element in JavaScript is a fundamental task that enables developers to dynamically manipulate the appearance and behavior of web pages. Classes in HTML provide a powerful way to apply CSS styles or JavaScript functionality to multiple elements at once.
2 min read
How to remove a Class name from an Element using JavaScript ? Removing a class name from an HTML element using JavaScript is often used to dynamically modify the styling or behavior of an element based on user interactions, events, or other conditions. The operation can be achieved using classList property, that allows you to add, remove, or toggle classes. Sy
3 min read
How To Get Element By Class Name In JavaScript ? When working with the DOM in JavaScript, selecting elements by their class names is a common task. JavaScript provides several methods to achieve this, whether we need to select one or multiple elements. In this article, we will cover different approaches to get elements by class name in JavaScript.
3 min read
How to change style/class of an element using JavaScript ? In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com
4 min read