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 elementvar 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 syntaxconst 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 CSSclasstothis 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>