Adding & Removing Classes

Learn how to change an element's appearance by toggling CSS classes with JavaScript — the clean, maintainable way to handle dynamic styles.

Step 1 of 4

classList: your CSS wardrobe

Every element has a `.classList` property that lets you add, remove, and toggle CSS classes. This is the primary way JavaScript controls visual changes on a page.

- `element.classList.add('active')` — adds the class - `element.classList.remove('active')` — removes the class - `element.classList.toggle('active')` — adds it if missing, removes it if present - `element.classList.contains('active')` — returns `true` or `false`

When YouTube highlights the current video tab, that's `classList.add('active')`. When you close a dropdown menu, that's `classList.remove('open')`. When you click a dark mode toggle, that's `classList.toggle('dark')`.

Think of it this way: classList is like a wardrobe system. Instead of sewing new clothes onto a person (writing inline styles), you have pre-made outfits (CSS classes) hanging in the closet that you can swap on and off. It's faster, cleaner, and you can reuse outfits across multiple people (elements).

Learn more on MDN

Element.classList

JAVASCRIPTREAD ONLY

CONSOLE

Click "Run" to execute your code...