Manipulating CSS Classes with classList - DOM

In this article, you will learn how to use the JavaScript classList property to work with the CSS classes of an element by either removing, adding, toggling, or checking if a class exists in an element. This is something we often use when building the frontend of web applications.

Previously, almost everyone relied on jQuery to perform these kinds of DOM manipulations, but it never made sense importing a whole jQuery library just to perform little DOM manipulation.

What is the classList property?

The classList is a read-only property of an element that returns a collection of CSS classes and allows us to make use of some methods as well for managing and updating those classes.

Example:
If we have a p tag element with class short-note and paragraph

<p  class="short-note paragraph" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing el.</p>

we can easily get the list of all the classes contained in the p element using the code below

let theClasses = document.querySelector('#content');
console.log(theClasses.classList);

The classList property provides a few methods such as:

• add() : Adds specified classes
• remove() : Removes specified classes
• contains() : Checks whether the specified class exists on the element
• toggle() : toggles specified class

I will be explaining each of them with an example and then at the end of this article, you will see a codepen link to a simple sidebar project of which I made use of the classList property.

add()

To add one or more CSS classes to the class list of an element, you use the add() method of the classList.

Example:
The following code adds the show class to the class list of the div element with the id content:

let div = document.querySelector('#content');
div.classList.add('show'); 

we can also add multiple CSS classes to the class list of an element:

let div = document.querySelector('#content');
div.classList.add('show','remove','flow');

remove()

To remove one or more CSS classes from the class list of an element, you use the remove() method of the classList.

Example:
The following code removes the show class from the class list of the div element with the id content:

let div = document.querySelector('#content');
div.classList.remove('show');

we can also remove multiple CSS classes from the class list of an element:

let div = document.querySelector('#content');
div.classList.remove('show','remove','flow');

contains()

This method helps us know if a particular class is contained in our element. The contains() method returns true if the classList contains a specified class; otherwise false.

Example:

let div = document.querySelector('#content'); 
div.classList.contains('show'); // true

toggle()

The toggle() method is a very cool method most frontend developers use from time to time as it saves you the whole stress of checking if a class exists then remove or otherwise. The toggle method helps us make use of just one line of code instead of about 5 lines of code.

Simply, it checks if the class list of an element contains a specified class name, the toggle() method removes it. If the class list doesn’t contain the class name, the toggle() method adds it to the class list. This is mostly used for hamburger menus.

Example:

let div = document.querySelector('#content'); 
div.classList.toggle('visible');

There are other methods like:

• index() : returns the class at a specified position in the list
• length : returns the number of classes

Briefly, we have seen how we could make use of these methods to either add, remove, toggle, or check if a class exists in an element.

As I promised here is a simple sidebar project in which I used these classList methods to either hide the sidebar or show the navbar by wither adding or removing a CSS class.

As always, any questions or suggestions, please feel free to leave a response or tweet me 🤭! Be sure to connect with me on socials! 😎