Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript DOM

JavaScript classList

Written by Published

classList adds, removes and toggles CSS classes on an element.

Changing a class is usually better than setting styles one at a time.

The appearance stays in the stylesheet and JavaScript only decides which class applies.

Example

Example

javascript

document.body.innerHTML = '<p id="demo" class="note">Text</p>';

const p = document.getElementById("demo");
p.classList.add("active");

console.log(p.className);

The output is note active.

The classList Methods

add and remove change which classes are present.

toggle adds the class if it is missing and removes it if it is there.

contains returns true or false.

Syntax

Syntax

javascript

element.classList.add("name");
element.classList.remove("name");
element.classList.toggle("name");

Class names are written without a dot.

Adding and Removing

Adding a class that is already there changes nothing, which is safe.

Example

Example

javascript

document.body.innerHTML = '<p id="demo" class="one two">Text</p>';

const p = document.getElementById("demo");
p.classList.remove("one");
p.classList.add("three");

console.log(p.className);

The output is two three.

Toggling

This is the natural fit for anything that switches on and off.

Example

Example

javascript

document.body.innerHTML = '<p id="demo">Text</p>';

const p = document.getElementById("demo");

p.classList.toggle("open");
console.log(p.classList.contains("open"));

p.classList.toggle("open");
console.log(p.classList.contains("open"));

The output is true then false.

Forcing a Toggle

A second argument decides the result instead of flipping it.

Example

Example

javascript

document.body.innerHTML = '<p id="demo">Text</p>';

const p = document.getElementById("demo");

p.classList.toggle("open", true);
p.classList.toggle("open", true);

console.log(p.classList.contains("open"));

Called twice with true, the class is still there.

Several Classes at Once

add and remove both accept more than one name.

Example

Example

javascript

document.body.innerHTML = '<p id="demo">Text</p>';

const p = document.getElementById("demo");
p.classList.add("a", "b", "c");

console.log(p.classList.length);

The output is 3.

Why Not className?

className replaces every class at once, wiping out any others.

classList changes only the class you name.

Example

Example

javascript

document.body.innerHTML = '<p id="demo" class="keep">Text</p>';

const p = document.getElementById("demo");
p.classList.add("added");

console.log(p.className);

Using className = "added" would have lost the keep class.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript classList</title>
  <style>
    .highlight { background: #fef9c3; padding: 8px; }
  </style>
</head>
<body>

  <h1>classList</h1>

  <p id="demo" class="note">This paragraph gets a class.</p>

  <script>
    const p = document.getElementById("demo");

    p.classList.add("highlight");

    document.title = p.className;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try toggling instead:

Change add to toggle and run it twice.

Important Points

  • classList.add and remove change one class at a time.
  • toggle flips a class on and off.
  • A second argument to toggle forces the result.
  • contains checks whether a class is present.
  • className replaces every class, so classList is usually safer.

Conclusion

classList is the cleanest way to change how an element looks.

It keeps the styling in CSS and the decision in JavaScript.

toggle in particular removes a lot of if statements.

PreviousJavaScript DOM StylesNextJavaScript Creating Elements