var element = document.getElementById('element');
element.classList.add('class-1');
element.classList.add('class-2', 'class-3');
element.classList.remove('class-3');
// getting the target element
var myElement = document.querySelector('#myElement');
// example for addding some-class to the element
myElement.classList.add('some-class');
// multiple classes can be added like this
myElement.classList.add('one-class', 'one-more-class');
// example for removing any class from the element
myElement.classList.remove('any-class');
const element = document.querySelector('CSS_SELECTOR')
element.classList.add('class-1') // add class-1
element.classList.remove('class-1') // remove class-1
element.classList.toggle('class-1') // add class-1 if the element does not contains the class, remove if not.
// This is to add a class to any html element after you store it
// in the element variable
element.classList.add("my-class-name");
// This is to remove a class from the element
element.classlist.remove("my-class-name");
const div = document.createElement('div');
div.className = 'foo';
// our starting state: <div class="foo"></div>
console.log(div.outerHTML);
// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");
// <div class="anotherclass"></div>
console.log(div.outerHTML);
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
console.log(div.classList.contains("foo"));
// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");
// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);
// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");
<p id="id1">Javascript adds a CSS class to this paragraph.</p>
<script>
// Get the element with id="id1"
const element = document.getElementById("id1");
// Add a class
// METHOD 1
element.classList.add("quote");
// METHOD 2
element.className += "box";
</script>