JavaScript DOM
classListadds, 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
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.
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
javascript
element.classList.add("name");
element.classList.remove("name");
element.classList.toggle("name");Class names are written without a dot.
Adding a class that is already there changes nothing, which is safe.
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.
This is the natural fit for anything that switches on and off.
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.
A second argument decides the result instead of flipping it.
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.
add and remove both accept more than one name.
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.
className replaces every class at once, wiping out any others.
classList changes only the class you name.
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
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>Run the above example in the Try It Editor.
Try toggling instead:
Change add to toggle and run it twice.
classList.add and remove change one class at a time.toggle flips a class on and off.toggle forces the result.contains checks whether a class is present.className replaces every class, so classList is usually safer.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.