Classlist In Javascript Code Example

Example 1: js check for class in classList

element.classList.contains(className);

Example 2: 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 3: 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 4: classlist

// use the classList API to remove and add classes div.classList.remove("foo"); div.classList.add("anotherclass");

Example 5: classlist.contain in javascript

let span = document.querySelector("span"); let classes = span.classList; let result = classes.contains("d"); if (result) {   span.textContent = "The classList contains 'c'"; } else {    span.textContent = "The classList does not contain 'c'"; }

Example 6: add to classlist javascript

Add multiple classes to a <div> element: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");  Remove a class from a <div> element: document.getElementById("myDIV").classList.remove("mystyle");  Remove multiple classes from a <div> element: document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");  Toggle between two classes for a <div> element: document.getElementById("myDIV").classList.toggle("newClassName");  Find out if an element has a "mystyle" class: document.getElementById("myDIV").classList.contains("mystyle");