How to Use classList in JavaScript
How to Use classList in JavaScript: A Beginner's Guide
Introduction
When I first started learning JavaScript, one thing confused me a lot — how do you change the look of a button or div when someone clicks it?
The answer was simpler than I thought: just add or remove a CSS class using JavaScript.
And the easiest way to do that? The classList property.
In this guide, I'll walk you through everything you need to know about classList — what it is, how it works, and how to use it in real projects. No complicated stuff. Just simple, clear examples.
What is classList?
Every HTML element can have one or more CSS classes. Like this:
<button class="btn primary large">Click Me</button>
The classList property in JavaScript lets you add, remove, or check those classes without touching your CSS file.
Think of it like a remote control for your element's classes.
const button = document.querySelector("button");
console.log(button.classList);
// DOMTokenList ["btn", "primary", "large"]
Simple, right?
Why Use classList?
Before classList existed, developers used className to manage classes. But it had one big problem — it would overwrite everything.
// This REMOVES all existing classes and replaces with just "active"
element.className = "active";
With classList, you don't have that problem:
// This ADDS "active" without touching other classes
element.classList.add("active");
That's the main reason to use it. It's cleaner, safer, and easier to read.
classList Methods — One by One
Let's go through each method with simple examples.
1. add() — Add a Class
Use add() when you want to put a new class on an element.
<div id="box">Hello!</div>
const box = document.getElementById("box");
box.classList.add("highlight");
Result:
<div id="box" class="highlight">Hello!</div>
You can also add more than one class at a time:
box.classList.add("highlight", "bold", "large");
2. remove() — Remove a Class
Use remove() when you want to take a class away from an element.
box.classList.remove("highlight");
Before:
<div class="highlight bold large"></div>
After:
<div class="bold large"></div>
Don't worry — if the class doesn't exist, nothing breaks. It just does nothing.
3. toggle() — Add or Remove Automatically
This one is my favorite. toggle() works like a light switch:
- If the class is there → it removes it
- If the class is not there → it adds it
box.classList.toggle("active");
Every time you call this, it switches back and forth. Perfect for things like:
// Dark mode button
document.body.classList.toggle("dark-mode");
One line. That's all you need for a working dark mode toggle.
4. contains() — Check if a Class Exists
Use contains() when you want to know if an element already has a class.
if (box.classList.contains("active")) {
console.log("The box is active!");
}
It returns true or false. Very useful when you need to make decisions in your code.
5. replace() — Swap One Class for Another
Use replace() when you want to change one class to another.
// Before: class="light-theme"
box.classList.replace("light-theme", "dark-theme");
// After: class="dark-theme"
Much cleaner than removing one and adding another separately.
Quick Reference Table
| Method | What it Does |
|---|---|
add("class") |
Adds a class to the element |
remove("class") |
Removes a class from the element |
toggle("class") |
Adds if missing, removes if present |
contains("class") |
Returns true or false |
replace("old", "new") |
Swaps one class for another |
Real-World Example: Show and Hide Content
Let's build something real. A button that shows and hides a message.
HTML
<button id="toggleBtn">Show Message</button>
<div id="message" class="hidden">
Hello! You clicked the button.
</div>
CSS
.hidden {
display: none;
}
JavaScript
const btn = document.getElementById("toggleBtn");
const message = document.getElementById("message");
btn.addEventListener("click", () => {
message.classList.toggle("hidden");
});
That's it! When you click the button, the message appears. Click again, it disappears.
This is exactly how most dropdown menus, popups, and notifications work on real websites.
Common Mistakes to Avoid
Mistake 1 — Not Selecting the Element First
// Wrong — JavaScript doesn't know what "box" is
box.classList.add("active");
// Right — select it first
const box = document.getElementById("box");
box.classList.add("active");
Mistake 2 — Getting the Class Name Wrong
JavaScript class names are case-sensitive. .Highlight and .highlight are two different classes.
box.classList.add("Highlight"); // Wrong if CSS says .highlight
box.classList.add("highlight"); // Correct
Mistake 3 — Using className When You Should Use classList
// Dangerous — overwrites ALL existing classes
element.className = "active";
// Safe — only adds "active", keeps everything else
element.classList.add("active");
Best Practices
- Always select your element first before using classList
- Use clear class names like
is-active,is-hidden,is-open - Keep styles in CSS — only use JavaScript to add or remove class names
- Use toggle() for anything that switches on and off
- Use contains() before making changes when you're not sure of the current state
Conclusion
The classList property is one of those things that once you learn it, you'll use it in almost every JavaScript project.
Let's quickly recap what we covered:
add()— adds a classremove()— removes a classtoggle()— switches a class on and offcontains()— checks if a class is therereplace()— swaps one class for another
Start small. Try adding a class on a button click. Then try toggling a dark mode. Before you know it, you'll be using classList without even thinking about it.
If you found this helpful, share it with someone who's just starting to learn JavaScript. And if you have any questions, drop them in the comments below!
Found this helpful?
If you enjoyed this tutorial and want to master the JavaScript DOM, check out my complete guide. It’s packed with the concepts covered here plus 9 IN-DEPTH chapters 50+ REAL-WORLD code examples 4 HANDS-ON mini projects 20+ essential DOM interview cheatsheet to help you land your next role.
Comments
Post a Comment