How Can I Add a Class to an HTML Element Using JavaScript?

Adding a Class to an Existing Element

In HTML, we can assign classes to elements to stylize and identify them using CSS. Sometimes, we need to add an additional class to an existing element dynamically using JavaScript. This tutorial covers two methods to achieve this, catering to modern and legacy browsers.

Modern Browsers (IE9 ):

The classList property provides a straightforward way to manipulate the classes of an element. Here's how to add a class:

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

Legacy Browsers (IE8-):

For older browsers, we need to manipulate the className property directly. However, we need to carefully consider the existing classes present in the element.

Steps:

1. Assign an ID to the element for easy access in JavaScript.
2. Use the following JavaScript code to add the class:

var d = document.getElementById("elementID");
d.className += " new-class";

Make sure to include a space before the new class name to avoid overwriting existing classes.

The above is the detailed content of How Can I Add a Class to an HTML Element Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!