How To Change An Element's Class With JavaScript?

Using the className Property

The className property changes an element's class. To replace all classes, use:

element.className = "newClass";

To add a new class without removing existing ones:

element.className += " newClass";

To remove a class:

element.className = element.className.replace("classToRemove", "");

element.className = element.className.replace("classToRemove", "").trim();

Using the classList API

The classList API offers methods for class manipulation:

// Add a class
element.classList.add("newClass");

// Remove a class
element.classList.remove("oldClass");

// Toggle a class (add if not present, remove if present)
element.classList.toggle("toggleClass");

These methods work in modern browsers, but may not function in older versions of Internet Explorer. For better compatibility, use a polyfill or use the className property.

Using getElementById()

The getElementById() method selects a single element based on its ID attribute. This method is fast:

const element = document.getElementById('myElementId');

This method works well when you need to manipulate a specific element on your page. It's useful for elements that don't change or move in your HTML structure.

Using querySelector() and querySelectorAll()

These methods give you more options for selecting elements:

querySelector() selects the first element that matches the CSS selector:

const element = document.querySelector('.myClass');

querySelectorAll() selects all elements that match the selector, returning a NodeList:

const elements = document.querySelectorAll('.myClass');

These methods let you select elements using different criteria:

• By class: querySelector('.className')
• By ID: querySelector('#idName')
• By tag name: querySelector('div')
• By attribute: querySelector('[data-attribute]')
• By relationship: querySelector('ul > li')

You can combine selectors for more specific targeting:

const element = document.querySelector('div.myClass[data-attribute="value"]');

These methods are helpful when you need to select elements based on complex criteria or when you want to manipulate multiple elements at once.

// Select all paragraphs inside a div with class 'content'
const paragraphs = document.querySelectorAll('div.content p');

// Loop through the selected paragraphs and add a class
paragraphs.forEach(paragraph => {
  paragraph.classList.add('highlighted');
});

Handling Click Events

To change classes when a user clicks an element, you can use the addEventListener() method. This method adds an event listener to the element, which runs a function when the event occurs.

Here's how to change a class on click:

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  this.classList.toggle('active');
});

In this example, clicking the button toggles the 'active' class.

You can also use arrow functions for event listeners:

button.addEventListener('click', () => {
  button.classList.add('clicked');
});

Responding to Other Events

Besides clicks, you can respond to other events to change classes:

1. Mouseover and mouseout:

const element = document.querySelector('#myElement');

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

element.addEventListener('mouseout', () => {
  element.classList.remove('hovered');
});

2. Keypress:

document.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    document.body.classList.toggle('dark-mode');
  }
});

3. Form submission:

const form = document.querySelector('#myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  form.classList.add('submitted');
});

4. Scroll:

window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  if (window.scrollY > 100) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

These examples show how to use events to trigger class changes. By combining these methods, you can create dynamic web pages that respond to user actions.

document.querySelector('#parentElement').addEventListener('click', (event) => {
  if (event.target.matches('.childClass')) {
    event.target.classList.toggle('active');
  }
});

const element = document.querySelector('#myElement');

element.addEventListener('dblclick', () => {
  element.classList.toggle('enlarged');
});