How do you remove a CSS class from an element using pure JavaScript?

Removing CSS Class from an Element Using Pure JavaScript

When working with web elements, you may encounter situations where you need to dynamically remove a specific CSS class. Knowing how to achieve this using pure JavaScript is crucial. Unlike jQuery, which simplifies element manipulation, JavaScript offers a versatile solution for class removal.

To effectively remove a class from an element using JavaScript, leverage the classList property, which is widely supported by modern browsers. The syntax is straightforward:

ELEMENT.classList.remove("CLASS_NAME");

For instance, let's consider the following HTML element:

<div>

In this case, el is an element with an assigned red class. Suppose you want to remove the red class from it using JavaScript. You can do so by executing the following code:

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

After this execution, the el element will no longer have the red class, effectively changing its appearance. Note that this solution is compatible with most modern browsers and provides a clean way to manipulate CSS classes dynamically.

The above is the detailed content of How do you remove a CSS class from an element using pure JavaScript?. For more information, please follow other related articles on the PHP Chinese website!