HTML DOM Element classList property

Definition and usage

classList The property returns the CSS class names of the element.

classList The property returns DOMTokenList.

Example

Example 1

Add the "myStyle" class to the element:

const list = element.classList;
list.add("myStyle");

Try It Yourself

Example 2

Remove the "myStyle" class from the element:

const list = element.classList;
list.remove("myStyle");

Try It Yourself

Example 3

Toggle the open/close of "myStyle":

const list = element.classList;
list.toggle("myStyle");

Try It Yourself

Tip:More examples are provided below the page.

Syntax

element.classList

Returns value

Type Description
Object DOMTokenList. The list of class names of the element.

Note:The classList property is read-only, but you can use the methods listed below to add, toggle, or remove CSS classes from the list:

classList properties and methods

Name Description
add() Adds one or more tokens to the list.
contains() Returns true if the list contains a class.
entries() Returns an iterator over entries of the list with key/value pairs.
forEach() Execute a callback function for each token in the list.
item() Return the token at the specified index.
keys() Return an iterator containing the keys in the list.
length Return the number of tokens in the list.
remove() Remove one or more tokens from the list.
replace() Replace the token in the list.
supports() Return true if the token is one of the supported tokens of the attribute.
toggle() Toggle between tokens in the list.
value Return the token list as a string.
values() Return an iterator with the values in the list.

More examples

Example 4

Add multiple classes to the element:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Try It Yourself

Example 5

Remove multiple classes from the element:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Try It Yourself

Example 6

How many class names does the element have?

let numb = element.classList.length;

Try It Yourself

Example 7

Get the class names of the element "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Try It Yourself

Example 8

Get the first class of the element:

let className = element.classList.item(0);

Try It Yourself

Example 9

Does the element have the "myStyle" class?

let x = element.classList.contains("myStyle");

Try It Yourself

Example 10

If the element has the "myStyle" class, then remove "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Try It Yourself

Example 11

Toggle between classes to create a dropdown button:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Try It Yourself

Example 12

Create Sticky Navigation Bar:

// Get the navigation bar
const navbar = document.getElementById("navbar");
// Get the offset position of the navigation bar
const sticky = navbar.offsetTop;
// Add the sticky class to the navigation bar when you reach its scroll position
// Remove it when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Try It Yourself

Browser Support

All Browsers Support element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Related Pages

CSS Tutorial:CSS Syntax

CSS Reference Manual:CSS .class Selector

DOMTokenList Object

className Property

getElementsByClassName() Method

HTML DOM Style Object