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 to change an element's class with JavaScript?
In JavaScript, you can change an element's class using several methods. The most common approaches are using the className property for complete replacement and classList methods for more flexible manipulation.
- How to change the element's class using className property
- How to toggle between classes using className and classList
Using className Property
The className property allows you to get or set the entire class attribute of an element. When you assign a new value, it replaces all existing classes.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.oldStyle {
background-color: yellow;
padding: 5px;
border: 2px solid orange;
font-size: 15px;
}
.newStyle {
background-color: green;
text-align: center;
font-size: 25px;
padding: 7px;
color: white;
}
</style>
</head>
<body>
<h1>Changing the class</h1>
<p>Click the button to change the class</p>
<button onclick="changeClass()">Change Class</button>
<div id="mydiv" class="oldStyle">
<p>This div will change style when you click the button</p>
</div>
<script>
function changeClass() {
document.getElementById("mydiv").className = "newStyle";
}
</script>
</body>
</html>
Toggle Between Classes
You can create a toggle function that switches between two classes by checking the current class and changing it accordingly.
Using className Property for Toggle
<!DOCTYPE html>
<html>
<head>
<style>
.oldStyle {
background-color: yellow;
padding: 5px;
border: 2px solid orange;
font-size: 15px;
}
.newStyle {
background-color: green;
text-align: center;
font-size: 25px;
padding: 7px;
color: white;
}
</style>
</head>
<body>
<h1>Toggle the class</h1>
<p>Click the button to toggle between classes</p>
<button onclick="toggleClass()">Toggle Class</button>
<div id="mydiv" class="oldStyle">
<p>This div toggles between two styles</p>
</div>
<script>
function toggleClass() {
const element = document.getElementById("mydiv");
if (element.className === "oldStyle") {
element.className = "newStyle";
} else {
element.className = "oldStyle";
}
}
</script>
</body>
</html>
Using classList.toggle() (Modern Approach)
The classList.toggle() method provides a cleaner way to toggle classes. It adds the class if it doesn't exist and removes it if it does.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: lightblue;
padding: 10px;
border: 2px solid blue;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Using classList.toggle()</h1>
<button onclick="toggleHighlight()">Toggle Highlight</button>
<div id="content">
<p>This content can be highlighted or normal</p>
</div>
<script>
function toggleHighlight() {
document.getElementById("content").classList.toggle("highlight");
}
</script>
</body>
</html>
Comparison of Methods
| Method | Use Case | Advantage |
|---|---|---|
className |
Replace all classes | Direct control over entire class attribute |
classList.toggle() |
Add/remove single class | Cleaner syntax, preserves other classes |
Conclusion
Use className when you need to replace all classes, and classList.toggle() for modern, flexible class manipulation. The classList approach is generally preferred for its simplicity and better handling of multiple classes.
549 Views
