How can I change an element's class with JavaScript?

Changing the class name of an element in JavaScript is a common operation that enables dynamic modification of page styling based on user interactions or other logic. Several methods can achieve this, and here are some commonly used approaches:

1. Using the className Property

The className property can retrieve or set the class attribute of an element. To change an element's class name, assign it a new class name string.

javascript
// Assume there is an element <div id="myDiv" class="oldClass"></div>
var element = document.getElementById("myDiv");
element.className = "newClass";  // Change the class name from 'oldClass' to 'newClass'

Note: This method replaces all existing class names on the element, retaining only the class name you specify.

2. Using the classList API

classList is a modern approach that provides methods like add, remove, and toggle for flexible class name management.

• Adding a class name:

  javascript
  var element = document.getElementById("myDiv");
  element.classList.add("newClass"); // Add newClass without affecting existing class names

• Removing a class name:

  javascript
  var element = document.getElementById("myDiv");
  element.classList.remove("oldClass"); // Remove oldClass

• Toggling a class name:

  javascript
  var element = document.getElementById("myDiv");
  element.classList.toggle("active"); // Remove if present, add if absent

classList is a powerful tool for handling multiple class names on an element, with concise and clear syntax.

Practical Application Example

Suppose we are developing a website where we need to toggle a button's active state based on user clicks. We can use classList.toggle to implement this:

html
<button id="toggleButton">Click me</button>
<style>
  .active { background-color: green; color: white; }
</style>

javascript
var button = document.getElementById("toggleButton");
button.addEventListener("click", function() {
  this.classList.toggle("active");
});

Every time the user clicks the button, the active class name is added (if not present) or removed (if present). Consequently, the button's styling updates according to the CSS rules defined for the active class.

By employing these methods, we can effectively control element class names and modify their appearance, creating more dynamic and interactive web pages.