Vanilla Javascript basics; Adding and removing classes

Adding and removing classes to HTML elements with vanilla Javascript. Also included is a toggle and replace method.

Adding a class name to an element with classList.add()

document.getElementById("theId").classList.add("green-text");

Add multiple

document.getElementById("theId").classList.add("green-text", "large-txt", "underline");

Removing a class is done with classList.remove()

document.getElementById("theId").classList.remove("green-text");

You can also use toggle() which will remove the class if set otherwise it will add the class to the element

document.getElementById("theId").classList.toggle("active");

replace() will replace the first parameter with the second:

document.getElementById("theId").classList.replace("old-class", "new-class);