1elem.classList.add("first");
2elem.classList.add("second");
3elem.classList.add("third");
4
5is equal to :
6
7elem.classList.add("first","second","third");
1classList.item(index); // Returns the item in the list by its index, or undefined if index is greater than or equal to the list's length
2classList.contains(token); // Returns true if the list contains the given token, otherwise false.
3classList.add(token1[, ...tokenN]); // Adds the specified token(s) to the list.
4classList.remove(token1[, ...tokenN]); // Removes the specified token(s) from the list.
5classList.replace(oldToken, newToken); // Replaces token with newToken.
6classList.supports(token); // Returns true if a given token is in the associated attribute's supported tokens.
7classList.toggle(token[, force]); // Removes token from the list if it exists, or adds token to the list if it doesn't. Returns a boolean indicating whether token is in the list after the operation.
8classList.entries(); // Returns an iterator, allowing you to go through all key/value pairs contained in this object.
9classList.forEach(callback[ ,thisArg]); // Executes a provided callback function once per DOMTokenList element.
10classList.keys(); // Returns an iterator, allowing you to go through all keys of the key/value pairs contained in this object.
11classList.values(); // Returns an iterator, allowing you to go through all values of the key/value pairs contained in this object.
1const div = document.createElement('div');
2div.className = 'foo';
3
4// our starting state: <div class="foo"></div>
5console.log(div.outerHTML);
6
7// use the classList API to remove and add classes
8div.classList.remove("foo");
9div.classList.add("anotherclass");
10
11// <div class="anotherclass"></div>
12console.log(div.outerHTML);
13
14// if visible is set remove it, otherwise add it
15div.classList.toggle("visible");
16
17// add/remove visible, depending on test conditional, i less than 10
18div.classList.toggle("visible", i < 10 );
19
20console.log(div.classList.contains("foo"));
21
22// add or remove multiple classes
23div.classList.add("foo", "bar", "baz");
24div.classList.remove("foo", "bar", "baz");
25
26// add or remove multiple classes using spread syntax
27const cls = ["foo", "bar"];
28div.classList.add(...cls);
29div.classList.remove(...cls);
30
31// replace class "foo" with class "bar"
32div.classList.replace("foo", "bar");
1var myElement = document.getElementById("myElementID");
2myElement.classList.add("style1 style2");
3myElement.classList.remove("style1 style2");
1Add multiple classes to a <div> element:
2document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
3
4Remove a class from a <div> element:
5document.getElementById("myDIV").classList.remove("mystyle");
6
7Remove multiple classes from a <div> element:
8document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
9
10Toggle between two classes for a <div> element:
11document.getElementById("myDIV").classList.toggle("newClassName");
12
13Find out if an element has a "mystyle" class:
14document.getElementById("myDIV").classList.contains("mystyle");
1
2// use the classList API to remove and add classes
3div.classList.remove("foo");
4div.classList.add("anotherclass");
5