js classlist add multiple code example
Example 1: add multiple class list at once in js
elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");
is equal to :
elem.classList.add("first","second","third");
Example 2: js classlist
classList.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
classList.contains(token); // Returns true if the list contains the given token, otherwise false.
classList.add(token1[, ...tokenN]); // Adds the specified token(s) to the list.
classList.remove(token1[, ...tokenN]); // Removes the specified token(s) from the list.
classList.replace(oldToken, newToken); // Replaces token with newToken.
classList.supports(token); // Returns true if a given token is in the associated attribute's supported tokens.
classList.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.
classList.entries(); // Returns an iterator, allowing you to go through all key/value pairs contained in this object.
classList.forEach(callback[ ,thisArg]); // Executes a provided callback function once per DOMTokenList element.
classList.keys(); // Returns an iterator, allowing you to go through all keys of the key/value pairs contained in this object.
classList.values(); // Returns an iterator, allowing you to go through all values of the key/value pairs contained in this object.
Example 3: add multiple classList
element.classList.add(class1,class2,class3...);
Example 4: css class list
var myElement = document.getElementById("myElementID");
myElement.classList.add("style1 style2");
myElement.classList.remove("style1 style2");
Example 5: classlist
// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");
Example 6: jquery add multiple classes
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected highlight" );
</script>
</body>
</html>