JavaScript classList.replace
last modified April 2, 2025
In this article, we explore the classList.replace method in
JavaScript. This method is essential for dynamically modifying CSS classes
on DOM elements, allowing for flexible styling changes.
Basic Definition
The classList.replace method replaces an existing class with
a new class on an element. It is part of the DOMTokenList interface
returned by the element.classList property.
The method takes two parameters: the class to replace and the new class to add. It returns true if the replacement was successful, false otherwise. The original class must exist for the replacement to work.
Basic classList.replace
This example demonstrates how to replace a simple CSS class on an element.
<!DOCTYPE html>
<html>
<head>
<title>Basic classList.replace</title>
<style>
.old-style { color: red; }
.new-style { color: blue; }
</style>
</head>
<body>
<p id="text" class="old-style">This text will change color</p>
<button onclick="replaceClass()">Replace Class</button>
<script>
function replaceClass() {
const element = document.getElementById('text');
element.classList.replace('old-style', 'new-style');
}
</script>
</body>
</html>
In this basic example, we have a paragraph with the class "old-style". When the button is clicked, the class is replaced with "new-style".
This demonstrates the fundamental usage of classList.replace.
The text color changes from red to blue when the class is replaced.
Toggle Between Classes
This example shows how to toggle between two classes using replace.
<!DOCTYPE html>
<html>
<head>
<title>Toggle Classes</title>
<style>
.day { background-color: white; color: black; }
.night { background-color: black; color: white; }
</style>
</head>
<body>
<div id="theme" class="day">
<p>Theme content</p>
<button onclick="toggleTheme()">Toggle Theme</button>
</div>
<script>
function toggleTheme() {
const theme = document.getElementById('theme');
if (theme.classList.contains('day')) {
theme.classList.replace('day', 'night');
} else {
theme.classList.replace('night', 'day');
}
}
</script>
</body>
</html>
Here we have a theme container with day and night classes. The button toggles between these themes by replacing one class with another.
This demonstrates how classList.replace can be used with
classList.contains to implement theme switching functionality.
Error Handling
This example demonstrates error handling when replacing non-existent classes.
<!DOCTYPE html>
<html>
<head>
<title>Error Handling</title>
</head>
<body>
<p id="message" class="active">Status message</p>
<button onclick="deactivate()">Deactivate</button>
<script>
function deactivate() {
const msg = document.getElementById('message');
const success = msg.classList.replace('active', 'inactive');
if (!success) {
console.log('Class replacement failed - active class not found');
}
}
</script>
</body>
</html>
In this example, we attempt to replace the "active" class with "inactive". The method returns false if the original class doesn't exist.
This shows how to handle cases where class replacement might fail. Checking the return value helps ensure robust code when dealing with dynamic classes.
Animation Class Replacement
This example shows how to replace animation classes for smooth transitions.
<!DOCTYPE html>
<html>
<head>
<title>Animation Replacement</title>
<style>
.slide-in { animation: slideIn 0.5s forwards; }
.slide-out { animation: slideOut 0.5s forwards; }
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes slideOut {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
</style>
</head>
<body>
<div id="panel" class="slide-in">Content Panel</div>
<button onclick="toggleSlide()">Toggle Slide</button>
<script>
function toggleSlide() {
const panel = document.getElementById('panel');
if (panel.classList.contains('slide-in')) {
panel.classList.replace('slide-in', 'slide-out');
} else {
panel.classList.replace('slide-out', 'slide-in');
}
}
</script>
</body>
</html>
Here we have a panel with slide animations. The button toggles between sliding in and sliding out animations by replacing the animation classes.
This demonstrates how classList.replace can create smooth
animations by swapping CSS animation classes dynamically.
Multiple Class Replacement
This example shows how to replace multiple classes in sequence.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Replacements</title>
<style>
.state-1 { background: lightblue; }
.state-2 { background: lightgreen; }
.state-3 { background: lightcoral; }
</style>
</head>
<body>
<div id="status" class="state-1">Process Status</div>
<button onclick="advanceState()">Next State</button>
<script>
function advanceState() {
const status = document.getElementById('status');
if (status.classList.contains('state-1')) {
status.classList.replace('state-1', 'state-2');
} else if (status.classList.contains('state-2')) {
status.classList.replace('state-2', 'state-3');
} else {
status.classList.replace('state-3', 'state-1');
}
}
</script>
</body>
</html>
In this example, we cycle through three different states by replacing classes. Each state has a different background color.
This demonstrates how classList.replace can manage multiple
state changes in a UI component by systematically replacing classes.
Source
MDN classList.replace Documentation
In this article, we have shown how to use classList.replace
in JavaScript. This method is powerful for dynamic class manipulation
and state management in web applications.
Author
List all JS DOM tutorials.