How can I set an element to have multiple classes?
Initial attempt:
element.setAttribute("class","class1","class2");
element.className="class1 , class2";
element.class="class1 , class2";
How can I use setAttribute to set multiple classes on an element?
Viewed 58914
11 Answers
Even without using setAttribute you could add multiple classes for an element by classList property (which is supported by all modern browsers).
// add or remove multiple classes
element.classList.add("foo", "bar", "baz");
element.classList.remove("foo", "bar", "baz");
Few more useful stuffs you can do using classList
Find and Replace:
// replace class "foo" with class "bar"
element.classList.replace("foo", "bar");
Check for class existence:
// check a class is exist for the element
console.log(element.classList.contains("foo")); // return true/false
Toggle class in/out:
// add the class 'foo' if the element doesn't have class 'foo'
// remove the class 'foo' if the element has the class 'foo'
console.log(element.classList.toggle("foo")); // true - class was added otherwise false.
Related