How to Change an Element's Class with JavaScript

Javascript Html Dom

Changing the class of an HTML element dynamically using JavaScript is a common task in web development. Whether it's to apply different styles or toggle between different states, being able to modify the class of an element allows for dynamic changes on the page.

1. Accessing HTML Elements

Before we can change the class of an element, we need to access it using JavaScript. There are several ways to do this:

  • By element ID: We can use the getElementById() method to directly access an element by its unique ID:

const element = document.getElementById('elementId');
  • By element class: We can use the getElementsByClassName() method to access elements by their class name. This method returns a collection of elements, so we'll need to specify the index of the desired element:

const elements = document.getElementsByClassName('elementClass');
const element = elements[0];
  • By element tag name: We can use the getElementsByTagName() method to access elements by their tag name. Again, this method returns a collection and we'll need to specify the index:

const elements = document.getElementsByTagName('div');
const element = elements[0];

2. Changing the Class

Once we have access to the desired element, we can change its class using the className property. We can assign a new class name or append additional classes to the existing ones:


// Assign a new class
element.className = 'newClass';

// Add a class to existing ones
element.className += ' anotherClass';

It's important to note that assigning a new class using className will override any existing classes. If you want to keep the existing classes intact, you can use the classList property instead.

3. Using classList

The classList property provides a more flexible way to work with classes. It has several methods:

  • add(className): Adds a class to the element.
  • remove(className): Removes a class from the element.
  • toggle(className): Toggles a class, adding it if it doesn't exist and removing it if it does.
  • contains(className): Checks if the element has a specific class.

Here's an example of using classList to change an element's class:


element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('active');

4. Event Handling

To change an element's class in response to an event, we can use event handling functions. For example, if we want to change an element's class when it's clicked, we can add an onclick event listener:


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

element.onclick = function() {
  element.classList.toggle('active');
};

This code will toggle the "active" class of the element whenever it's clicked.

Conclusion

Changing the class of an HTML element dynamically using JavaScript is a powerful technique that allows for dynamic styling and interactivity on web pages. Whether you choose to use the className property or the classList property, understanding how to access and modify an element's class is an essential skill for front-end web development.

Related Questions