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()


Add multiple

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

Removing a class is done with classList.remove()


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


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

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