Latest web development tutorials

HTML DOM classList property

Elements Object Reference Element object

Examples

For the <div> element to add class:

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

try it"

Definition and Usage

classList property returns the class name of the element, as DOMTokenList object.

This property is used in the element to add, remove, and toggle CSS class.

classList property is read-only, but you can use the add () and remove () method to modify it.

Browser Support

Figures in the table represent the first browser to support the property version number.

Attributes
classList 8.0 10.0 3.6 5.1 11.5

grammar

element .classList

Properties

Attributes Description
length Returns the number of the class list class

This property is read-only

method

method description
add (class1, class2, ...) Add one or more class names in the element.

If the specified class name already exists, it will not add / td>
contains (class) Returns a Boolean value, it is determined whether the presence of the specified class name.

Possible values:

  • true - element package already contains a class name
  • false - element does not exist in the class name
item (index) Returns the class name in the element index value. Index values ​​start from zero.

If the index value is out of range of range or null
remove (class1, class2, ...) Remove one or more elements of the class name.

Note: Removing the class name does not exist, does not complain.
toggle (class, true | false) Switching class names in the element.

The first parameter is the name of the class you want to remove the element and returns false.
If the class name does not exist, it will add the class names in the element, and returns true.

The second is an optional parameter is a Boolean value that is used to set whether the element is mandatory to add or remove categories, regardless of the class name exists. E.g:

Remove a class: element .classList.toggle ( "classToRemove" , false);
Add a class: element .classList.toggle ( "classToAdd" , true);

Note: Internet Explorer or Opera 12 and earlier versions do not support the second parameter.

Technical Description

return value: A DOMTokenList, class name list contains elements
Examples

More examples

Examples

For the <div> element to add more categories:

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

try it"

Examples

Remove a class for the <div> element:

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

try it"

Examples

For the <div> element to remove multiple classes:

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

try it"

Examples

For the <div> element to switch categories:

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

try it"

Examples

Get the class name <div> element:

<div id = "myDIV" class = "mystyle anotherClass thirdClass"> I am a DIV element </ div>

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

x The output is:

mystyle anotherClass thirdClass

try it"

Examples

See <div> element has a number of class names:

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

x The output is:

3

try it"

Examples

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

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

x The output is:

mystyle

try it"

Examples

See element exists "mystyle" category:

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

x The output is:

true

try it"

Examples

See element exists "mystyle" category, if present remove another class name:

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

if (x.classList.contains ( "mystyle") ) {
x.classList.remove ( "anotherClass");
} Else {
alert ( "Could not find it. ");
}

try it"

related articles

CSS tutorial: CSS selectors

CSS Reference: CSS selectors .class

HTML DOM Reference Manual: HTML DOM className attribute

HTML DOM Reference Manual: HTML DOM getElementsByClassName () method

HTML DOM Reference Manual: HTML DOM Style Object

Elements Object Reference Element object