JavaScript Add Remove Class to html | on scroll, click & mouseover

Learn how to dynamically add or remove classes from HTML elements in JavaScript. This tutorial covers examples for JavaScript add or remove classes. See examples for adding a class to a table row, and adding/removing a class on a scroll or click events.

JavaScript add class

To add a class to an element in JavaScript, you can use the classList.add() method.
Here is an example:

const element = document.querySelector('#my-element');
element.classList.add('my-class');

This will add the my-class class to the element with the ID my-element.

JavaScript remove class

To remove a class from an element, you can use the classList.remove() method.

Here is an example:

const element = document.querySelector('#my-element');
element.classList.remove('my-class');

This will remove the my-class class from the element with the ID my-element.

JavaScript toggle class

You can also toggle a class on and off using the classList.toggle() method.

If the class is present, it will be removed. If the class is not present, it will be added.

Here is an example:

const element = document.querySelector('#my-element');
element.classList.toggle('my-class');

This will add the my-class class if it is not present, or remove it if it is present, on the element with the ID my-element.

Add/remove class on scroll JavaScript

To add or remove a class based on scrolling in JavaScript, we can use the window object’s scroll event and the classList property to add or remove classes from elements.

Here’s an example:

<div class="header">Header</div>

/* CSS styles */
.header {
  position: fixed;
  top: -50px;
  transition: top 0.3s ease-in-out;
}

.header.active {
  top: 0;
}

// JavaScript code
const header = document.querySelector('.header');

window.addEventListener('scroll', () => {
  if (window.scrollY > 50) {
    header.classList.add('active');
  } else {
    header.classList.remove('active');
  }
});

In this example, we use the querySelector() method to select the .header element.

Then, we attach a scroll event listener to the window object.

Inside the event listener, we check if the scrollY property of the window object is greater than 50.

If it is, we add the active class to the .header element using the classList.add() method.

If it isn’t, we remove the active class using the classList.remove() method.

In the CSS styles, we set the initial position of the .header element to be above the viewport using the top property.

When the active class is added, the top property is set to 0 using a CSS transition, causing the header to slide into view.

Add and remove active class onclick javascript

To add and remove an active class on click in JavaScript, you can use the classList property of the clicked element and the querySelectorAll() method to select all the elements to remove the active class from.

Here’s an example:

<!-- HTML markup -->
<ul>
  <li class="item active">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
</ul>

/* CSS styles */
.active {
  background-color: yellow;
}

// JavaScript code
const menuItems = document.querySelectorAll('.item');

menuItems.forEach((item) => {
  item.addEventListener('click', () => {
    // remove active class from all menu items
    document.querySelectorAll('.item').forEach((el) => {
      el.classList.remove('active');
    });

    // add active class to clicked menu item
    item.classList.add('active');
  });
});

In this example, we use the querySelectorAll() method to select all the menu items with the .item class.

Then, we use the forEach() method to loop through each menu item and attach a click event listener to it.

Inside the event listener, we use the querySelectorAll() method again to select all the menu items, and use another forEach() loop to remove the active class from each item using the classList.remove() method.

Finally, we add the active class to the clicked menu item using the classList.add() method.

In the CSS styles, we define the active class to set the background color of the menu item to yellow.

Add and remove class on mouseover javascript

To add and remove a class on mouseover in JavaScript, you can use the classList property of the hovered element and the mouseover and mouseout events.

Here’s an example:

<!-- HTML markup -->
<div class="box">Hover me</div>

/* CSS styles */
.highlight {
  background-color: yellow;
}

// JavaScript code
const box = document.querySelector('.box');

box.addEventListener('mouseover', () => {
  box.classList.add('highlight');
});

box.addEventListener('mouseout', () => {
  box.classList.remove('highlight');
});

In this example, we use the querySelector() method to select the box element, and attach two event listeners to it: one for mouseover and another for mouseout.

Inside the event listeners, we use the classList.add() and classList.remove() methods to respectively add and remove the highlight class from the box element.

In the CSS styles, we define the highlight class to set the background color of the box to yellow.

JavaScript add class to table row

To add a class to a table row in JavaScript, you can use the classList property of the HTMLTableRowElement interface. Here’s an example:

<!-- HTML markup -->
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

In the CSS styles, we define the highlight class to set the background color of the row to yellow.

/* CSS styles */
.highlight {
  background-color: yellow;
}

// JavaScript code
const tableRows = document.querySelectorAll('tbody tr');

tableRows.forEach((row) => {
  row.addEventListener('click', () => {
    row.classList.toggle('highlight');
  });
});

In this example, we use the querySelectorAll() method to select all <tr> elements inside the <tbody> element. Then, we use the forEach() method to loop through each row and attach a click event listener to it.

Inside the event listener, we use the classList.toggle() method to add or remove the highlight class from the clicked row.

For any kind of programming help, HTML help or Javascript help contact us and hire experts.