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');var someElement= document.getElementById("myElement");
someElement.className += " newclass";//add "newclass" to element (space in front is important)element.classList.add('class');
element.classList.remove('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.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");