Managing HTML classes
Add a class to an element
Adding a class to an element uses the .add() method found on the .classList property of the element
elem.classList.add('class-name');
elem.classList.add('several', 'class-names');Remove a class from an element
Remove a class to an element uses the .remove() method found on the .classList property of the element
elem.classList.remove('class-name');
elem.classList.remove('several', 'class-names');Toggle a class
Toggling a class, ie. removing it if it exists or adding if it doesn't, is done using the .toggle() method found on the .classList property of the element.
elem.classList.toggle('class-name');The .toggle() method can take an optional second parameter that determines if the class should be added or removed.
const bool = true; // Use a conditional to determine if the class should be added or not.
elem.classList.toggle('it-depends', bool);Check for a specific class
You can check for a specific class within the list by using the .contains() method found on the .classList property.
const hasClass = elem.classList.contains('class-name');