Add Css Class To Html Element Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

40

Share

Adding CSS Classes to HTML Elements with JavaScript

JavaScript provides a powerful way to dynamically manipulate HTML elements, including adding and removing CSS classes. This functionality allows for interactive and responsive web experiences.

Here's how you can add CSS classes to HTML elements using JavaScript:

1. Using the classList Property

The most straightforward method is using the classList property, which offers a set of methods for managing CSS classes on an element.

Code Example:

const myElement = document.getElementById('my-element');

// Add a class
myElement.classList.add('active');

// Remove a class
myElement.classList.remove('inactive');

// Toggle a class
myElement.classList.toggle('hidden');

// Check if a class exists
if (myElement.classList.contains('highlighted')) {
  // Do something
}

Explanation:

• document.getElementById('my-element'): Selects the HTML element with the ID 'my-element'.
• classList.add('active'): Adds the class 'active' to the element.
• classList.remove('inactive'): Removes the class 'inactive' from the element.
• classList.toggle('hidden'): Toggles the class 'hidden' on or off. If the class exists, it's removed; if not, it's added.
• classList.contains('highlighted'): Checks if the element has the class 'highlighted'.

2. Using the className Property

Another method is using the className property. This property stores a space-separated list of all the classes applied to an element.

Code Example:

const myElement = document.getElementById('my-element');

// Add a class
myElement.className += ' new-class';

// Remove a class
myElement.className = myElement.className.replace('old-class', '');

Explanation:

• myElement.className += ' new-class': Appends the class 'new-class' to the existing list of classes.
• myElement.className = myElement.className.replace('old-class', ''): Replaces the class 'old-class' with an empty string, effectively removing it.

3. Using setAttribute()

You can also use the setAttribute() method to add or remove classes.

Code Example:

const myElement = document.getElementById('my-element');

// Add a class
myElement.setAttribute('class', 'new-class');

// Remove a class
myElement.setAttribute('class', myElement.getAttribute('class').replace('old-class', ''));

Explanation:

• myElement.setAttribute('class', 'new-class'): Sets the 'class' attribute of the element to 'new-class', replacing any existing classes.
• myElement.setAttribute('class', myElement.getAttribute('class').replace('old-class', '')): Replaces the class 'old-class' with an empty string in the 'class' attribute, effectively removing it.

Best Practices

• Use classList: For most situations, the classList property is the recommended approach due to its ease of use and compatibility.
• Avoid over-using classes: Keep your class names concise and descriptive to ensure maintainability and readability.
• Use event listeners: Trigger class changes based on user interaction or specific events.

By dynamically managing CSS classes with JavaScript, you can create engaging and dynamic web experiences that respond to user actions and data updates.