Add Class to Element

Interactive JavaScript Class Manipulation Demo

Basic Example

Click the button to add a highlight class!

Not Highlighted

Code Example

      // Add a single class
      element.classList.add('highlight');

      // Remove a class
      element.classList.remove('highlight');

      // Toggle a class
      element.classList.toggle('highlight');

      // Add multiple classes
      element.classList.add('class1', 'class2', 'class3');

      // Check if class exists
      if (element.classList.contains('highlight')) {
      console.log('Class exists!');
      }
    

Multiple Classes

Add multiple classes at once!

Toggle Multiple Elements

Box 1

Box 2

Box 3

Box 4

Click on any box to toggle its active state

Key Methods

classList.add() - Adds one or more classes to an element
classList.remove() - Removes one or more classes from an element
classList.toggle() - Toggles a class on/off
classList.contains() - Checks if element has a specific class
classList.replace() - Replaces an existing class with a new one