How to Remove CSS Classes with JavaScript?

Removing CSS Classes with JavaScript

To remove a CSS class from an element using JavaScript, there are multiple approaches. Let's explore the recommended method using classList.

classList is a widely supported property in modern browsers. To use it, follow these steps:

1. Retrieve the element: Use document.querySelector() to select the element you want to modify.
2. Access the classList property: Once you have the element, use the classList property to manipulate the classes.
3. Remove the class: Call the remove() method on the classList and specify the class name you want to remove within quotation marks.

For example:

const el = document.querySelector('#el');
el.classList.remove("red");

This code will remove the "red" class from the element with the ID "el".

Additional Notes:

• If you need to remove multiple classes, you can use the remove() method multiple times.
• classList also supports add(), toggle(), and contains() methods for managing classes.
• For browsers that don't support classList, you can use element.className to remove the class, but it's considered obsolete.

The above is the detailed content of How to Remove CSS Classes with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!