You want to change an element’s class using JavaScript. For example, you may want to add a CSS class that animates an element when a “click” event occurs.
The Element.classList
read-only property returns a list representing the contents of an element’s class
attribute. It has methods that can be used to manipulate the class list of an element. You can use the classList.add()
method to add a CSS class to an HTML element once the element has been selected using one of the methods on the document
interface that returns a DOM Element
, such as getElementById
:
const btnEl = document.getElementById("submitBtn"); btnEl.classList.add("animate");
You can also add multiple classes at once:
btnEl.classList.add("animate", "hide");
You can remove a class or multiple classes using the classList.remove()
method:
btnEl.classList.remove("animate"); btnEl.classList.remove("animate", "hide");
There’s also a classList.toggle()
method that will add a class if it’s not present or remove it if it is.
The classList.toggle()
method also has an optional second argument called force
that can be used to make the toggle only occur once. If set to false
, the class will only be removed. If set to true
, the class will only be added.
You can check if a class is present on an element using the classList.contains()
method:
btnEl.classList.contains("animate");
This method will return true
if the element has the class and false
if it does not. You do not need to worry about checking if a class is present before adding it to an element as the list returned by classList
is a DOMTokenList
set, which means it can’t contain any duplicates.
Alternatively, the className
property and setAttribute
method can be used to set an element’s class attribute or add a class to an element:
// set the class attribute btnEl.setAttribute("class", "animate"); // set the class attribute with multiple classes btnEl.setAttribute("class", "animate hide"); // set the class attribute btnEl.className = "animate"; // set the class attribute with multiple classes btnEl.className = "animate hide"; // add a class btnEl.className += " hide";