Skip to content
10x Tech Infinity

Mastering ClassList and Toggle in JavaScript

Manipulating CSS classes with JavaScript is a powerful way to dynamically change the appearance of your web page. The classList property provides an easy and efficient way to work with an element’s classes. Let’s explore how to use it effectively.

Setting Up Our HTML

First, let’s look at our HTML structure:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM CLASSLIST PROPERTY</title>
    <script src="./6DOM-CLASSLIST-TOGGLE.JS" defer></script>
  </head>
  <body>
    <section class="section-todo container"></section>
  </body>
</html>

This HTML creates a <section> element with two classes: section-todo and container.

Working with ClassList

Let’s explore the various methods provided by classList:

Getting All Classes

To start, we’ll select our section and log its classes:

const section = document.querySelector(".section-todo");
console.log(section.classList);
// Output: DOMTokenList(2) ['section-todo', 'container', value: 'section-todo container']

The classList property returns a DOMTokenList, which is an array-like object containing all the classes of the element.

Adding a Class

To add a new class to an element, use the add() method:

section.classList.add("dark-light");
console.log(section.classList);
// Output: DOMTokenList(3) ['section-todo', 'container', 'dark-light', value: 'section-todo container dark-light']

This adds the dark-light class to our section.

Removing a Class

To remove an existing class, use the remove() method:

section.classList.remove("container");
console.log(section.classList);
// Output: DOMTokenList(2) ['section-todo', 'dark-light', value: 'section-todo dark-light']

This removes the container class from our section.

Checking if a Class Exists

To check if an element has a specific class, use the contains() method:

console.log(section.classList.contains("container"));
// Output: false

This returns false because we just removed the container class.

Toggling a Class

The toggle() method is particularly useful. It adds the class if it’s not present, and removes it if it is:

section.classList.toggle("bg-dark");
console.log(section.classList);
// Output: DOMTokenList(3) ['section-todo', 'dark-light', 'bg-dark', value: 'section-todo dark-light bg-dark']


section.classList.toggle("bg-dark");
console.log(section.classList);
// Output: DOMTokenList(2) ['section-todo', 'dark-light', value: 'section-todo dark-light']

The first toggle() adds bg-dark, and the second removes it.

Practical Uses

  1. Theme Switching: Toggle between light and dark themes.
  2. Interactive UI: Show/hide elements based on user actions.
  3. Form Validation: Add/remove error classes based on input validity.
  4. Responsive Design: Add classes based on screen size or device type.

Conclusion

The classList property and its methods provide a clean and efficient way to manipulate CSS classes in JavaScript. By mastering these techniques, you can create more dynamic and interactive web pages without directly manipulating inline styles.

Remember, while classList is powerful, it’s best used in conjunction with well-structured CSS. Define your styles in your stylesheet, and use JavaScript to apply or remove classes as needed. This approach keeps your code clean, maintainable, and performant.

Practice using these methods in your projects to become more comfortable with dynamic styling in JavaScript!

Happy Learning!