Answer: You can change an element’s class with JavaScript using the className property.
JavaScript is a web programming language. Classes are used in CSS and JavaScript to select and access the specific elements. There are a few more methods to change an element’s class in JavaScript such as classList API, classList.toggle, and setAttribute(). We will discuss these methods in this blog in detail.
Table of Contents:
Methods to Change the Element’s Class in JavaScript
There are many methods in JavaScript to change the element’s class. Here are some of the best methods that you can use for changing classes.
Method 1: Using the className Property to Change an Element’s Class with JavaScript
You can get or set the element class using the className property. You can completely assign the new name or modify the existing class.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Class using className</title>
<style>
.old-class {
color: red;
}
.new-class {
color: green;
}
</style>
</head>
<body>
<div id="myDiv" class="old-class">This is a div</div>
<button onclick="changeClass()">Change Class</button>
<script>
function changeClass() {
var element = document.getElementById("myDiv");
element.className = "new-class"; // Changes class to "new-class"
}
</script>
</body>
</html>
Output:
Explanation: Initially, the div has the class old-class and when we click the button, the changeClass() function changes the class to new-class.
Method 2: Using classList API to Change an Element’s Class with JavaScript
You can add, remove, or toggle the individual class using classList API. This is a flexible method compared to others.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Class using classList</title>
<style>
.old-class {
color: red;
}
.new-class {
color: green;
}
</style>
</head>
<body>
<div id="myDiv" class="old-class">This is a div</div>
<button onclick="changeClass()">Change Class</button>
<script>
function changeClass() {
var element = document.getElementById("myDiv");
element.classList.remove("old-class"); // Removes old-class
element.classList.add("new-class"); // Adds new-class
}
</script>
</body>
</html>
Output:
Explanation: The div element class changes from old-class to new-class, when you click the button. The classList.remove() and classList.add() methods are used to modify the element’s class.
Method 3: Using classList.toggle() to Change an Element’s Class with JavaScript
You can use classList.toggle() function to toggle the class in JavaScript. You can add or remove the class if it is missing or already existing.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Class</title>
<style>
.toggle-class {
color: blue;
}
</style>
</head>
<body>
<div id="myDiv">Click to toggle class</div>
<button onclick="toggleClass()">Toggle Class</button>
<script>
function toggleClass() {
var element = document.getElementById("myDiv");
element.classList.toggle("toggle-class"); // Toggles the class on and off
}
</script>
</body>
</html>
Output:
Explanation: When you click the button, the class gets toggled. It is indicated by changing the text colour.
Method 4: Using setAttribute() to Set Class to Change an Element’s Class with JavaScript
You can use setAttribute() to change the class attribute of an element directly.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Attribute for Class</title>
<style>
.old-class {
color: red;
}
.new-class {
color: green;
}
</style>
</head>
<body>
<div id="myDiv" class="old-class">This is a div</div>
<button onclick="changeClass()">Change Class</button>
<script>
function changeClass() {
var element = document.getElementById("myDiv");
element.setAttribute("class", "new-class"); // Directly sets the class attribute
}
</script>
</body>
</html>
Output:
Explanation: The changeClass() function is used to change the div’s class.
Method 5: Using classList.replace() to Change an Element’s Class with JavaScript
You can use the classList.replace() to replace the class. You can add or remove the class at the same time.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>classList.replace() Method</title>
<style>
.old-class {
color: red;
}
.new-class {
color: green;
}
</style>
</head>
<body>
<div id="myDiv" class="old-class">This is a div</div>
<button onclick="replaceClass()">Replace Class</button>
<script>
function replaceClass() {
var element = document.getElementById("myDiv");
element.classList.replace("old-class", "new-class"); // Replaces old-class with new-class
}
</script>
</body>
</html>
Output:
Explanation: When you use classList.replace() function, the div class gets changed while clicking the button.
Conclusion
You can use Javascript to change the element’s class. The className property is used to get or set the element class, classList API can add, remove, or toggle, and classList.replace() replaces one class with another element. The above-discussed methods are the most efficient way to change the element’s class.