Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do I add a class to a given element using Javascript?
In JavaScript, there are various approaches to add a class to an element. We can use the .className property or the .classList.add() method to add a class name to a specific element.
The class attribute can be used in CSS to style elements and perform various tasks for elements with the same class name.
Using the className Property
The className property allows you to add a class to an HTML element while preserving its existing classes. This property gets or sets the value of the class attribute of an element.
When adding a new class to an element that already has classes, you need to append the new class name with a space to avoid overwriting existing classes.
Syntax
To add a class while preserving existing classes:
element.className += " newClass";
To get the current class names:
element.className;
Example 1: Adding a Class with className
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: blueviolet;
font-style: italic;
background-color: lightcoral;
padding: 10px;
}
</style>
</head>
<body>
<button onclick="addClass()">Add Class</button>
<h3 id="heading">Tutorialspoint - Easy to Learn</h3>
<script>
function addClass() {
var element = document.getElementById("heading");
element.className += " highlight";
}
</script>
</body>
</html>
Example 2: Setting className Directly
<!DOCTYPE html>
<html>
<head>
<style>
.styled {
color: green;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<button onclick="addClass()">Set Class</button>
<p id="text">Click the button to style this text</p>
<script>
function addClass() {
document.getElementById("text").className = "styled";
}
</script>
</body>
</html>
Using the classList.add() Method
The classList.add() method is the modern and preferred approach for adding classes. It automatically handles spacing and prevents duplicate class names.
Syntax
element.classList.add("newClass");
Example 1: Basic Usage of classList.add()
<!DOCTYPE html>
<html>
<head>
<style>
.newClass {
font-size: 24px;
background-color: lightgreen;
color: darkblue;
border: 2px solid navy;
padding: 15px;
}
</style>
</head>
<body>
<h1>Hello Tutorialspoint!</h1>
<p id="demo">Welcome to tutorialspoint.com</p>
<button onclick="addClass()">Add Class</button>
<script>
function addClass() {
var element = document.getElementById("demo");
element.classList.add("newClass");
}
</script>
</body>
</html>
Example 2: Adding Multiple Classes
<!DOCTYPE html>
<html>
<head>
<style>
.bold { font-weight: bold; }
.red { color: red; }
.border { border: 2px solid black; padding: 5px; }
</style>
</head>
<body>
<p id="text">This text will be styled</p>
<button onclick="addMultipleClasses()">Add Multiple Classes</button>
<script>
function addMultipleClasses() {
var element = document.getElementById("text");
element.classList.add("bold", "red", "border");
}
</script>
</body>
</html>
Comparison
| Method | Preserves Existing Classes | Prevents Duplicates | Modern Approach |
|---|---|---|---|
className += |
Yes (with space) | No | No |
classList.add() |
Yes (automatically) | Yes | Yes |
Conclusion
Use classList.add() as the preferred method for adding classes in modern JavaScript. It automatically handles spacing and prevents duplicate classes, making your code cleaner and more reliable.
1K+ Views
