Phase 10 — DOM (Very Important)

Module 34 — Working with CSS Classes

CSS classes control the appearance of HTML elements. JavaScript provides the classList API to easily add, remove, toggle, replace, and check CSS classes without modifying the entire class attribute.

The classList API is widely used in:

• Dark Mode
• Navigation Menus
• Dropdowns
• Modals
• Tabs
• Accordions
• Image Sliders
• Form Validation
• Toast Notifications

Overview

classList.add()

Adds one or more CSS classes to an element.

HTML

htmlCopy
1<div id="box"></div>

JavaScript

javascriptCopy
1const box = document.getElementById("box");
2
3box.classList.add("active");

Result

htmlCopy
1<div id="box" class="active"></div>

Add Multiple Classes

javascriptCopy
1box.classList.add("card", "shadow", "rounded");

classList.remove()

Removes one or more classes.

javascriptCopy
1box.classList.remove("shadow");

Result

htmlCopy
1<div class="card rounded"></div>

classList.toggle()

Adds the class if it doesn't exist, otherwise removes it.

javascriptCopy
1box.classList.toggle("dark");

Click again:

javascriptCopy
1box.classList.toggle("dark");

This is commonly used for:

• Dark Mode
• Sidebar Menus
• Mobile Navigation
• Dropdown Menus

classList.replace()

Replaces one class with another.

javascriptCopy
1box.classList.replace(
2
3"light",
4
5"dark"
6
7);

Result

htmlCopy
1<div class="dark"></div>

classList.contains()

Checks whether a class exists.

javascriptCopy
1console.log(
2
3box.classList.contains("active")
4
5);

Output

textCopy
1true

Practical Example

HTML

htmlCopy
1<button id="btn">
2
3Click Me
4
5</button>

CSS

cssCopy
1.active{
2
3    background:green;
4
5    color:white;
6
7}

JavaScript

javascriptCopy
1const button = document.getElementById("btn");
2
3button.classList.add("active");

The button becomes green with white text.

Real-World Example — Dark Mode

HTML

htmlCopy
1<button id="theme">
2
3Dark Mode
4
5</button>

JavaScript

javascriptCopy
1const button = document.getElementById("theme");
2
3button.addEventListener("click", () => {
4
5    document.body.classList.toggle("dark");
6
7});

CSS

cssCopy
1.dark{
2
3    background:#222;
4
5    color:white;
6
7}

Every click switches between light and dark mode.

Real-World Example — Active Navigation

javascriptCopy
1const links = document.querySelectorAll(".nav-link");
2
3links.forEach(link => {
4
5    link.addEventListener("click", () => {
6
7        links.forEach(item => {
8
9            item.classList.remove("active");
10
11        });
12
13        link.classList.add("active");
14
15    });
16
17});

Used in:

• Navigation Bars
• Sidebars
• Tabs

Mini Project — Show/Hide Password

HTML

htmlCopy
1<input
2
3type="password"
4
5id="password">
6
7<button id="toggle">
8
9Show
10
11</button>

CSS

cssCopy
1.visible{
2
3    border:2px solid green;
4
5}

JavaScript

javascriptCopy
1const password = document.getElementById("password");
2
3const button = document.getElementById("toggle");
4
5button.addEventListener("click", () => {
6
7    password.classList.toggle("visible");
8
9});

Common Mistakes

Modifying className Instead of classList

❌ Wrong

javascriptCopy
1element.className = "active";

This removes all existing classes.

✅ Better

javascriptCopy
1element.classList.add("active");

Forgetting to Check Before Replacing

❌ Wrong

javascriptCopy
1element.classList.replace("light","dark");

If "light" doesn't exist, nothing changes.

Use:

javascriptCopy
1if(element.classList.contains("light")){
2
3    element.classList.replace("light","dark");
4
5}

Using toggle() Incorrectly

Remember that toggle() changes the state every time it is called. If you always want a class applied, use add() instead.

Best Practices

• Prefer classList over className for modifying CSS classes.
• Use toggle() for UI states such as menus, modals, and dark mode.
• Use contains() before making decisions based on a class.
• Add or remove multiple classes in a single classList.add() or classList.remove() call when appropriate.
• Keep CSS responsible for styling and JavaScript responsible for behavior.

Interview Questions

Q1. What is the difference between className and classList?

• className reads or replaces the entire class attribute.
• classList provides methods to add, remove, toggle, and check individual classes without affecting others.

Q2. What does classList.toggle() do?

It adds the specified class if it is not present, and removes it if it already exists.

Q3. Why use classList.contains()?

It checks whether an element has a specific CSS class and returns true or false.

Q4. When should you use classList.replace()?

Use it when you want to swap one existing class with another, such as changing a theme or component state.

Summary

In this module, you learned how to manage CSS classes using the classList API. You explored classList.add(), classList.remove(), classList.toggle(), classList.replace(), and classList.contains() to create dynamic user interfaces. These methods are essential for building modern web applications with interactive components such as navigation menus, dark mode, modals, tabs, and form validation.

Next Module: Module 35 — DOM Styles, where you'll learn style, getComputedStyle(), CSS custom properties (variables), cssText, element dimensions, and responsive styling techniques used in professional frontend development.