One of the most common tasks in web development is changing the appearance or behavior of elements on a page. A straightforward way to do this is by modifying the class of an HTML element. Since CSS rules and JavaScript logic often rely on class names to apply styles or functionality, learning how to manipulate classes is essential. In this post, we’ll explore two primary ways to change an element’s class in JavaScript.

Why Would You Need to Change an Element’s Class?

Class manipulation is at the heart of building interactive pages. For instance, you might want to:

• Highlight an item when it’s clicked.
• Toggle between showing and hiding an element.
• Animate an element by toggling a CSS class that has animation rules.
• Switch themes (e.g., “light” to “dark”).

In all these cases, dynamically modifying an element’s class is the way to go.

Method 1: Using className

Setting a Single Class

Each HTML element has a className property in JavaScript. You can assign a string to this property to define which classes an element should have:

<!-- Example HTML -->
<div id="myElement" class="oldClass">Hello, World!</div>

<script>
  // Select the element
  const myElement = document.getElementById("myElement");

  // Change its class
  myElement.className = "newClass";
</script>

After this assignment, the element no longer has oldClass; it has only newClass.

Setting Multiple Classes

If you want an element to have multiple classes, just include them in the string:

myElement.className = "newClass additionalStyle";

Now, the element has two classes: newClass and additionalStyle.

Note: When you use className, you overwrite all existing classes. If you only want to add or remove a single class without losing the others, you might prefer the classList approach described next.

Method 2: Using classList

Modern browsers provide a more robust way to manage classes on an element with the classList property. classList lets you add, remove, and toggle classes without affecting any of the other classes the element might have.

classList.add()

<div id="myElement" class="oldClass">Hello, World!</div>

<script>
  const myElement = document.getElementById("myElement");
  
  // Add a new class
  myElement.classList.add("highlight");
</script>

Now, the element has both oldClass and highlight.

classList.remove()

<div id="myElement" class="oldClass highlight">Hello, World!</div>

<script>
  const myElement = document.getElementById("myElement");
  
  // Remove a specific class
  myElement.classList.remove("oldClass");
</script>

After this, the element’s classes are just highlight.

classList.toggle()

<div id="myElement" class="highlight">Hello, World!</div>

<script>
  const myElement = document.getElementById("myElement");
  
  // Toggle the class "highlight"
  myElement.classList.toggle("highlight");
</script>

If the element already has highlight, it removes it; otherwise, it adds it. This is a convenient way to switch states (e.g., turning a light/dark mode on or off with a single click).

Which Approach Should You Use?

• Use className when you want to replace all classes entirely or if you’re building something very simple and want a quick approach.
• Use classList when you need to add or remove a single class while leaving others intact. It’s also great for toggling classes without worrying about the element’s current class state.

Examples in Action

Here’s a quick example of using classList.toggle() to switch between two styles on a button click:

<style>
  .greenBackground {
    background-color: green;
    color: white;
    padding: 10px;
  }
  
  .redBackground {
    background-color: red;
    color: white;
    padding: 10px;
  }
</style>

<button id="colorSwitch" class="greenBackground">Toggle Color</button>

<script>
  const button = document.getElementById("colorSwitch");

  button.addEventListener("click", () => {
    // If it's green, remove "greenBackground" and add "redBackground"
    // If it's red, remove "redBackground" and add "greenBackground"
    button.classList.toggle("greenBackground");
    button.classList.toggle("redBackground");
  });
</script>

Clicking the button alternates its background between green and red.

Conclusion

Changing an element’s class with JavaScript is fundamental for interactive, dynamic web experiences. Whether you prefer using className for simplicity or classList for fine-grained control, mastering this skill opens up a wide range of possibilities for front-end development.

Experiment with both approaches, and you’ll soon see how much power you have to control the presentation and behavior of elements on your web pages. Happy coding!

Hire JavaScript Developers