JavaScript element.classList Property

You are Here:

JavaScript element.classList Property

The element.classList property returns a live DOMTokenList collection of the class attributes of the element.

This property is useful to add, remove, and toggle CSS classes on an element.

Note: This property is read-only.

Get All CSS Class

In the following example, we will get all the CSS class name of the specified element.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <style> .one{ color: red; } .two{ font-size: 20px; } </style> </head> <body> <p class="one two">Click on the button</p> <button onclick="myFunction()">Click Me</button> <p id="point"></p> <script> var x = document.getElementById("point"); var elem = document.getElementsByTagName("p")[0]; function myFunction(){ x.innerHTML = elem.classList; } </script> </body> </html>

Syntax

element.classList

Return Values

ValueExplanation
ObjectReturns a DOMTokenList containing the list of class attributes.

Add One CSS Class

In the following example, we will add one CSS Class to the specified element.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <style> .one{ color: red; } </style> </head> <body> <p>Click on the button</p> <button onclick="myFunction()">Click Me</button> <script> var elem = document.getElementsByTagName("p")[0]; function myFunction(){ elem.classList.add("one"); } </script> </body> </html>

Remove One CSS Class

In the following example, we will remove one CSS Class to the specified element.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <style> .one{ color: red; } </style> </head> <body> <p class="one">Click on the button</p> <button onclick="myFunction()">Click Me</button> <script> var elem = document.getElementsByTagName("p")[0]; function myFunction(){ elem.classList.remove("one"); } </script> </body> </html>

Add Multiple CSS Classes

In the followig example, we will add multiple CSS classes to the specified element.

Note: Use comma-separator to specify multiple css classList.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <style> .one{ color: red; } .two{ font-size: 20px; } </style> </head> <body> <p>Click on the button</p> <button onclick="myFunction()">Click Me</button> <script> var elem = document.getElementsByTagName("p")[0]; function myFunction(){ elem.classList.add("one", "two"); } </script> </body> </html>

Remove Multiple CSS Classes

In the followig example, we will remove multiple CSS classes to the specified element.

Note: Use comma-separator to specify multiple css classList.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <style> .one{ color: red; } .two{ font-size: 20px; } </style> </head> <body> <p class="one two">Click on the button</p> <button onclick="myFunction()">Click Me</button> <script> var elem = document.getElementsByTagName("p")[0]; function myFunction(){ elem.classList.remove("one", "two"); } </script> </body> </html>

Toggle CSS Class

In the following example, we will toggle the CSS class to the specified element.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <style> .one{ color: red; } </style> </head> <body> <p>Click on the button</p> <button onclick="myFunction()">Toggle Button</button> <script> var elem = document.getElementsByTagName("p")[0]; function myFunction(){ elem.classList.toggle("one"); } </script> </body> </html>

Count CSS Class

In the following example, we will count the number of CSS classes used in the specified element.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <style> .one{ color: red; } .two{ font-size: 20px; } </style> </head> <body> <p class="one two">Click on the button</p> <button onclick="myFunction()">Click Me</button> <p id="point"></p> <script> var x = document.getElementById("point"); var elem = document.getElementsByTagName("p")[0]; function myFunction(){ x.innerHTML = elem.classList.length; } </script> </body> </html>

Check CSS Class

In the following example, we will check whether the specified element has the given CSS class.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <style> .one{ color: red; } .two{ font-size: 20px; } </style> </head> <body> <p class="two">Click on the button</p> <button onclick="myFunction()">Click Me</button> <p id="point"></p> <script> var x = document.getElementById("point"); var elem = document.getElementsByTagName("p")[0]; function myFunction(){ // try to replace "one" with "two" x.innerHTML = elem.classList.contains("one"); } </script> </body> </html>

Reminder

Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in JavaScript.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author