Sentry Answers>JavaScript>

How can I change an element's class with JavaScript?

How can I change an element's class with JavaScript?

Matthew C.

—

The Problem

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 Solution

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:

Click to Copy
const btnEl = document.getElementById("submitBtn");
btnEl.classList.add("animate");

You can also add multiple classes at once:

Click to Copy
btnEl.classList.add("animate", "hide");

You can remove a class or multiple classes using the classList.remove() method:

Click to Copy
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:

Click to Copy
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:

Click to Copy
// 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";
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.