Element.
An object for adding, removing, toggling, and checking an element’s CSS classes.
- Returns
- A
DOMTokenListobject. Thetoggle(),contains(), andreplace()methods returntrueorfalse.
Example
#const card = document.querySelector('#card')
card.classList.add('active', 'highlight')
card.classList.remove('highlight')
console.log(card.className)
console.log(card.classList.toggle('done'))
console.log(card.classList.contains('done'))
console.log(card.classList.toggle('done'))
console.log(card.className)Definition and usage
#The classList property returns a DOMTokenList object with the element’s classes and methods for changing them. It’s the most convenient way to change a page’s appearance from JavaScript: you describe the style in CSS under a class name, and the script only adds or removes it.
The key methods are add() and remove(), which accept one or more classes, toggle(), which adds a class when it’s missing and removes it when it’s present, contains() for checking, and replace(oldClass, newClass). toggle() returns true if the class was added, and a second argument (true or false) lets you force the outcome.
Unlike overwriting className, the classList methods leave the other classes alone. Adding a class that’s already there, or removing one that isn’t, doesn’t break anything.
Syntax
#element.classList.add(className1, className2, …)
element.classList.remove(className1, className2, …)
element.classList.toggle(className)
element.classList.toggle(className, force)
element.classList.contains(className)
element.classList.replace(oldClass, newClass)Parameters
#className
string
A class name without the dot, e.g."active".force
optional, boolean
Intoggle():truealways adds the class, andfalsealways removes it.oldClass, newClass
strings
Inreplace(): the class to replace, and the class that takes its place.
More examples
#const panel = document.querySelector('#panel')
const button = document.querySelector('#theme')
button.addEventListener('click', () => {
const isLight = panel.classList.toggle('light')
console.log(isLight ? 'Light theme' : 'Dark theme')
})
button.click()const email = document.querySelector('#email')
const isValid = email.value.includes('@') && email.value.includes('.')
email.classList.toggle('invalid', !isValid)
console.log(email.classList.contains('invalid'))
console.log([...email.classList])Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Pass class names without the dot:
classList.add("active"), not".active". - Describe appearance in CSS, and only toggle classes in JavaScript. The code is more readable than setting many styles through
style. - Assigning
element.className = "active"removes every other class, whileclassList.add()adds a class alongside the existing ones.
Related entries
#- HTMLElement.styleAn object of styles set directly on an element (inline), for reading and changing individual CSS properties.
- Element.setAttribute()Sets the value of an element’s HTML attribute, or adds a new attribute.
- document.querySelectorAll()Returns a static list (NodeList) of every element that matches a CSS selector.
- EventTarget.addEventListener()Registers a function that’s called every time a given event occurs on an element, for example a click.
- HTMLElement.datasetAn object with an element’s data-* attribute values, for reading and storing your own data.
Spotted a mistake or missing an example? Write to us.