DOM: List/Add/Remove Class Attribute

This page shows you how to list/add/remove a HTML/XML element's class attribute.

Use the following methods to change a class value of a element.

• elem.classList → Returns elem's class attribute's space separated values as a array-like object.
• elem.classList.add("value") → Adds a class value to a element class attribute. If already exists, it will not add the class again.
• elem.classList.remove("value") → Removes a class value to a element class attribute. No error if doesn't exist.
• elem.classList.toggle("value") → Toggle a class value.
• elem.classList.toggle("value",force) → force is true or false. If true, always add the class. Else, toggle.
• elem.classList.contains("value") → returns true if elem contains the class value, else false.

Example:

<div id="x48389" class="aaa bbb ccc"></div>

const xx = document.getElementById("x48389");

xx.classList;

xx.classList.add("hh");

xx.classList.remove("bbb");

xx.classList.contains("aaa");

xx.classList.toggle("aaa");

Browser Support

classList is supported by all browsers as of 2010-10.