Easy Tutorial
❮ Event Relatedtarget Prop Radio Disabled ❯

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 IE Firefox Safari Opera
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 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 has the class name. <br>false - The element does not have the class name.
item(index) Returns the class name at the specified index. 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, 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 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;

x output is:

mystyle anotherClass thirdClass

Example

Get the number of classes on a <div> element:

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

x output is:

3

Example

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

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

x output is:

mystyle

Example

Check if a <div> element has the "mystyle" class:

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

x output is:

true

Example

Check if a <div> 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

❮ Event Relatedtarget Prop Radio Disabled ❯