Generate web pages in minutes—skip the repetitive coding
What is the main advantage of using classList over className?
Can I add multiple CSS classes at once using the classList property?
Is classList supported across all browsers?
Does `classList.toggle` only work with clicks?
Want a cleaner way to manage CSS classes with JavaScript? Learn how to manipulate CSS classes using JavaScript classList. This guide breaks it down with simple methods, practical examples, and smart styling tips.
Struggling to keep your JavaScript code clean while handling style changes?
It’s easy to end up with cluttered logic when you’re constantly adding or removing CSS classes. Inline styles can become messy quickly, and manual class updates often result in inconsistent designs across components. As your UI becomes more dynamic, that mess only grows.
Is there a simpler way to manage these visual changes without sacrificing readability?
That’s where the classList property comes in. It lets you add, remove, and toggle CSS classes directly on HTML elements —keeping your code clean, scalable, and easy to maintain.
In this blog, you’ll learn how to manipulate CSS classes using JavaScript classList through practical examples, essential methods, and tips that make your front-end code more efficient.
Learn how to use the classList property to manage CSS classes
Add, remove, toggle, and replace multiple CSS classes efficiently
Understand how classList works with the DOM
Use examples to implement interactive styling changes in your HTML
Improve your JavaScript styling logic without external libraries like jQuery
The classList is a read-only property of DOM elements that returns a live DOMTokenList. It represents the class attribute of the element as a list of tokens, meaning each class name is an item that can be added, removed, or toggled. This eliminates the need to manipulate className as a full string, making the code cleaner and safer.
1<!-- DOCTYPE HTML and a sample div --> 2<!DOCTYPE html> 3<html> 4 <body> 5 <div id="box" class="container"></div> 6 </body> 7</html>
1document.getElementById("box").className += " active";
1document.getElementById("box").classList.add("active");
With classList, you work directly with individual class values instead of dealing with a space-delimited string.
The classList property supports several methods to manipulate CSS classes efficiently:
| Method | Description | Example |
|---|---|---|
add() | Adds one or more classes | element.classList.add("visible") |
remove() | Removes one or more classes | element.classList.remove("hidden") |
toggle() | Adds if absent, removes if present | element.classList.toggle("highlight") |
contains() | Checks if a class exists | element.classList.contains("active") |
replace() | Replaces one class with another | element.classList.replace("old", "new") |
Let’s say you want to add a class to a div element when a user clicks a button. Here's a working example:
1<button id="btn">Toggle Highlight</button> 2<div id="box" class="box">Hello Box</div> 3 4<script> 5 const btn = document.getElementById("btn"); 6 const box = document.getElementById("box"); 7 8 btn.addEventListener("click", () => { 9 box.classList.toggle("highlight"); 10 }); 11</script>
In this example, toggle() switches the highlight class on each click using an event listener. This avoids manually managing string changes.
You can remove multiple CSS classes in a single line using:
1element.classList.remove("class1", "class2", "class3");
This is cleaner than slicing or splitting a string. It’s beneficial to change the style in response to a user event dynamically.
1<button id="menuBtn">Menu</button> 2<div id="sidebar" class="sidebar hidden"></div> 3 4<script> 5 document.getElementById("menuBtn").addEventListener("click", () => { 6 const sidebar = document.getElementById("sidebar"); 7 sidebar.classList.toggle("hidden"); 8 }); 9</script>
Explanation: The sidebar’s visibility is toggled based on the hidden class, demonstrating a clean UI interaction.
If you need to manage multiple classes conditionally, you can use logic like:
1if (box.classList.contains("box") && box.classList.contains("dark")) { 2 box.classList.remove("dark", "shadow"); 3}
This checks and removes css classes in context, keeping your JavaScript readable and responsive to UI state.
Avoid chaining raw className += unless you're handling the full class list manually
Use classList.add() and classList.remove() for multiple CSS classes
classList methods don’t throw errors for missing class values, making your code safe
Always test changes in multiple browsers for consistent behavior
Using the classList property eliminates the mess of string manipulation and gives you a cleaner, more reliable way to manage CSS classes. It directly addresses the frustration of juggling multiple class names, improving both readability and performance in your JavaScript code.
As user interfaces grow more dynamic, managing class changes with precision becomes more important. The classList methods enable you to respond to user actions, update styles in real-time, and maintain consistent design patterns across your components.
Start applying classList methods in your projects to write more maintainable, scalable code. Scroll back, try the examples, and integrate these patterns into your next UI interaction.
