How Can I Add or Remove Classes from HTML Elements Using JavaScript?

Adding a Class to an Element with JavaScript

When working with HTML elements, it often becomes necessary to add or remove classes dynamically using JavaScript. For instance, suppose you have an element with the following HTML:

<div class="someclass">
    <img  ... alt="How Can I Add or Remove Classes from HTML Elements Using JavaScript?" ><p>And you want to create a JavaScript function that will add another class to the above div element.</p>
<p><strong>Modern Browsers</strong></p>
<p>If you're only targeting modern browsers that support the Element.classList property, the solution is straightforward. Simply use the classList.add() method to add a new class to the element:</p>
<pre class="brush:php;toolbar:false">element.classList.add("my-class");

To remove a class, use the classList.remove() method:

element.classList.remove("my-class");

Internet Explorer 9 and Below

For older browsers like Internet Explorer 9 or lower, which do not support the classList property, you can use the className property. First, assign an ID to the element, making it easy to retrieve:

<div>
<p>Then, concatenate the new class name with the existing one, ensuring a space is added between them:</p>
<pre class="brush:php;toolbar:false">var d = document.getElementById("div1");
d.className += " otherclass";

Remember to include the space before the new class name to avoid conflicts with existing classes in the class list.

By following these approaches, you can dynamically add or remove classes from any HTML element using JavaScript, providing flexibility and control over the styling of your web pages.