In this section, we will learn what the Element classList property is and how to use it in JavaScript.

What is Element classList Property in JavaScript?

The JavaScript Element classList property returns a collection object known as DOMTokenList that contains the values of the class attribute for an element.

This collection object has multiple useful properties and methods that allow us to access each value of the class attribute (if there are multiple values), replace any of them with a new one, remove a class value, etc.

Here are some of the methods and property of this collection:

length: The length property will return the number of values set for the target class attribute.

add(class1,class2,classN): using this method, we can add one or more class names to an element. Note that if the specified names (arguments of this method) are already set for the class attribute, they won’t be added again!

contains(class): using this method, we can check and see if the target class name is already set in the target class attribute. This method will return a boolean value! The value true means the target element already has the specified class name. The value false means otherwise.

item(index): This method will return the class name at the specified index number. Note that the value null will return if we set an index number that is out of range. For example, let’s say there are 4 class names for the target element, but we put the index number 5 as the argument of this method. That’s where we get the value null instead of an actual class name.

remove(class1, class2, classN): using this method, we can remove one or more class names from the target element. If you specify a class name that does not exist in the target element, this method simply ignores it. So no error will occur.

toggle(class, true|false): Using this method we can specify a class name and then force those elements that have this class name to remove it, and force those elements that does not have such class name to add it as a new value for their class attribute.

The toggle() method takes two arguments:

– The first argument is the name of the class that we want to add/remove from an element.

– The second argument which is optional is a boolean value:

– The value true means the first argument (The class name) to be added to the target element no-matter if that element already has such class name or not.

– The value false means this class name should be removed from the target element no-matter what.

Element classList Property Syntax:

element.classList;

Element classList Property Input Value

The classList property is read-only and so we can’t assign a new value to it.

Element classList Property Return Value

The return value of this method is a collection object that contains the entire class names of an element.

Example: adding a CSS class in JavaScript

See the Pen adding a CSS class in JavaScript by Omid Dehghan (@odchan1) on CodePen.

Example: JavaScript remove class

See the Pen JavaScript remove class by Omid Dehghan (@odchan1) on CodePen.

Example: toggleClass JavaScript

See the Pen toggleClass JavaScript by Omid Dehghan (@odchan1) on CodePen.