Easy Tutorial
❮ Prop Link Hreflang Prop Style Paddingleft ❯

HTML DOM classList Property

Element Object

Example

Add a class to a <div> element:

document.getElementById("myDIV").classList.add("mystyle");

Definition and Usage

The classList property returns the class name(s) of an element, as a DOMTokenList object.

This property is used to add, remove, and toggle CSS classes on an element.

The classList property is read-only, but you can modify it using the add() and remove() methods.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property Chrome Edge Firefox IE Opera Safari
classList 8.0 10.0 3.6 5.1 11.5

Syntax

Properties

Property Description
length Returns the number of classes in the list. <br> <br>This property is read-only.

Methods

Method Description
add(class1, class2, ...) Adds one or more class names to an element. <br> <br>If the specified class name already exists, it will not be added.
contains(class) Returns a boolean value indicating whether an element has the specified class name. Possible values: true - The element already contains the class name. <br> false - The element does not contain the class name.
item(index) Returns the class name at the specified index. The index starts at 0. <br> <br>If the index is out of range, it returns null.
remove(class1, class2, ...) Removes one or more class names from an element. <br> <br>Note: Removing a non-existing class name will not throw an error.
toggle(class, true false) Toggles a class name on an element. <br> <br>The first parameter is the class name to be removed from the element and returns false. <br>If the class name does not exist, it will be added to the element and returns true. <br> <br>The second parameter is optional and is a boolean value that forces the addition or removal of the class name, regardless of its existence. For example: <br> <br>Remove a class: element.classList.toggle("classToRemove", false); <br>Add a class: element.classList.toggle("classToAdd", true); <br> <br>Note: Internet Explorer or Opera 12 and earlier versions do not support the second parameter.

Technical Description

| Return Value: | A DOMTokenList containing the list of class names for the element. | | --- | --- |


More Examples

Example

Add multiple classes to a <div> element:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

Example

Remove a class from a <div> element:

document.getElementById("myDIV").classList.remove("mystyle");

Example

Remove multiple classes from a <div> element:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

Example

Toggle a class on a <div> element:

document.getElementById("myDIV").classList.toggle("newClassName");

Example

Get the class names of a <div> element:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;

The output of x is:

mystyle anotherClass thirdClass

Example

Check how many class names a <div> element has:

var x = document.getElementById("myDIV").classList.length;

The output of x is:

3

Example

Get the first class name (index 0) of a <div> element:

var x = document.getElementById("myDIV").classList.item(0);

The output of x is:

mystyle

Example

Check if an element has the "mystyle" class:

var x = document.getElementById("myDIV").classList.contains("mystyle");

The output of x is:

true

Example

Check if an element has the "mystyle" class, and if so, remove another class:

var x = document.getElementById("myDIV");
if (x.classList.contains("mystyle")) {
    x.classList.remove("anotherClass");
} else {
    alert("Could not find it.");
}

Related Articles

CSS Tutorial: CSS Selectors

CSS Reference: CSS .class Selector

HTML DOM Reference: HTML DOM className Property

HTML DOM Reference: HTML DOM getElementsByClassName() Method

HTML DOM Reference: HTML DOM Style Object

Element Object

❮ Prop Link Hreflang Prop Style Paddingleft ❯