JavaScript element.classList Property
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
<!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
Return Values
Value | Explanation |
---|
Object | Returns 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
<!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
<!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
<!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
<!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
<!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
<!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
<!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