HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Add a "myStyle" class to an element
The classList
property returns the CSS classnames of an element.
The classList
property returns a
DOMTokenList.
Type | Description |
Object | A DOMTokenList. A list of the class names of an element. |
The classList
property is read-only,
but you can use the methods listed below, to add, toggle or remove CSS classes from the list:
Name | Description |
---|---|
add() | Adds one or more tokens to the list |
contains() | Returns true if the list contains a class |
entries() | Returns an Iterator with key/value pairs from the list |
forEach() | Executes a callback function for each token in the list |
item() | Returns the token at a specified index |
keys() | Returns an Iterator with the keys in the list |
length | Returns the number of tokens in the list |
remove() | Removes one or more tokens from the list |
replace() | Replaces a token in the list |
supports() | Returns true if a token is one of an attribute's supported tokens |
toggle() | Toggles between tokens in the list |
value | Returns the token list as a string |
values() | Returns an Iterator with the values in the list |
Add multiple classes to the an element:
element.classList.add("myStyle", "anotherClass", "thirdClass");
Remove multiple classes from an element:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
How many class names the element have:
let numb = element.classList.length;
Get the class names of the "myDIV" element:
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
Get the first class of an element:
let className = element.classList.item(0);
Does an an element has a "myStyle" class?
let x = element.classList.contains("myStyle");
Remove "anotherClass" if an element has a "myStyle" class.
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
Toggle between classes to create a dropdown button:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Create a sticky navigation bar:
// Get the navbar
const navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
const sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position
// Remove it when you leave the scroll position
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
element.classList
is supported in all browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 10-11 | Yes | Yes | Yes | Yes |