Logo
Back

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

You can dynamically change an element's CSS class when certain events occur—such as a click—by modifying the element’s class list in your JavaScript code. Below are a few approaches:

1. Using classList.add(), classList.remove(), and classList.toggle()

Modern browsers support manipulating classes through the classList API:

<button id="myButton">Click Me</button>
<div id="myElement" class="initial-class">Hello World</div>

<script>
  const myButton = document.getElementById('myButton');
  const myElement = document.getElementById('myElement');

  myButton.addEventListener('click', () => {
    // Add a class
    myElement.classList.add('new-class');
    
    // Remove a class
    myElement.classList.remove('initial-class');
    
    // Alternatively, toggle a class on/off
    myElement.classList.toggle('another-class');
  });
</script>

Why Use classList:

  • Readability: Methods like add(), remove(), and toggle() make it clear what you’re doing.
  • Safety: Avoids overwriting all existing classes (unlike setting className directly).
  • Multiple Classes: You can manipulate multiple classes on the same element easily.

2. Using element.className

A more old-school approach is to directly set the className property, though this overwrites any existing classes (unless you manually preserve them):

<button id="myButton">Click Me</button>
<div id="myElement" class="initial-class">Hello World</div>

<script>
  const myButton = document.getElementById('myButton');
  const myElement = document.getElementById('myElement');

  myButton.addEventListener('click', () => {
    // WARNING: This will remove any existing classes not included in the assignment
    myElement.className = 'new-class another-class';
  });
</script>

When to Use:

  • If you’re comfortable overwriting all classes or you need to reset them completely.
  • For most modern code, prefer classList for granular control.

3. Handling Other Event Types

The event could be anything recognized by HTML/JavaScript, such as mouseover, keyup, or custom events in frameworks. The same approach (via classList or className) applies:

myElement.addEventListener('mouseover', () => {
  myElement.classList.add('hovered');
});

Best Practices

  1. Use classList whenever possible to avoid unintentional overwriting.
  2. Check for Existing Classes if you need precise behavior (e.g., only add a class if not already present).
  3. Event Binding: Ensure you attach event listeners after the DOM is loaded (e.g., put your script at the bottom of the HTML or use DOMContentLoaded).

Level Up Your JavaScript and Front-End Skills

To further refine your JavaScript fundamentals and learn how to build interactive web pages efficiently, check out these courses on DesignGurus.io:

These courses focus on building a strong coding foundation and using pattern-based problem-solving techniques. For more free tutorials and insights, explore the DesignGurus.io YouTube channel. By mastering DOM manipulation and event handling, you’ll create more dynamic and user-friendly web applications.

CONTRIBUTOR
TechGrind