Adding and Removing Classes

Adding and removing Classes from DOM elements

Web api's give us the opportunity to add and remove css classes from HTML DOM elements after we have selected them. There are multiple functions to chose from for adding a class, removing a class, toggling a class and more. 

This is extremely useful because we don't need to add and remove a bunch of css properties when a specific event occurs. We can group them in a CSS class and then add or remove the whole class from an element. The following functions on DOM objects help us significantly to achieve what we want.

let section = document.querySelector('section');

section.classList.add('active')  // Add a css class with the name of 'active' to the section elem

section. classList.remove('active')  // Remove the 'active' class from section

section.classList.toggle('active')  // Add a class if not exist, remove it if it does

section.classList.replace(oldClass, newClass)  // This replaces a class with another one

Bear in mind that the classList object is not fully supported in older Internet Explorer versions. For being sure there is old another version that can be used in order to just set a CSS class to an element. This is the by applying element.className = 'classNameHere'.

Check full docs here on MDN