Answers by Sentry

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:

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";

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.111.0/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,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
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.