Add & Remove Classes With JavaScript Property classList and className
By using JavaScript property classList and className we can add or remove the any class to the HTML element. We can also add or remove the multiple classes to the HTML element.
className
The className property of the DOM element is always synchronised with the class attribute of the HTML element.
So whatever you assigned to the className property, JavaScript will assigned it to the class attribute of the HTML element.
Get current classes of the element
We have to simply use the className property of the HTML element to get the current classes of the element.
So for that first we have to found the HTML element.
After that we have to use the className property.
Syntax:
var element = document.getElementById("element-id");
var classNameIs = element.className;
Example:
<!DOCTYPE html>
<html>
<head>
<title>Add & Remove the class to the HTML element using JavaScript</title>
<meta charset="utf-8" />
<style>
body {
padding: 0;
margin: 0;
}
.redColor {
background-color: #FF0000;
height: 100px;
color: #FFFFFF;
font-weight: bold;
text-align:center;
}
</style>
</head>
<body>
<div id="divWelcome" class="redColor">
Hello there, <br/>
My current classes is: redColor
</div>
<script type="text/javascript">
var divWelcome = document.getElementById("divWelcome");
// It will return the current classes of the element
alert(divWelcome.className);
</script>
</body>
</html>
Assign new class to the element
We also can add the new class to the HTML element using the className property.
Warning: Be careful while adding the new class to the element by using the className property, Because it will override the all previous classes of the element.
Replace classes of element
var divWelcome = document.getElementById("divWelcome");
divWelcome.className = "new-class-name";
In above example, we assigned the new class to the element so all the old classes of the element will be removed or override and new class named “new-class-name” will be added to the HTML element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Add & Remove the class to the HTML element using JavaScript</title>
<meta charset="utf-8" />
<style>
body {
padding: 0;
margin: 0;
}
.redColor {
background-color: #FF0000;
height: 100px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
.greenColor{
background-color: #00FF00;
height: 100px;
color: #FFFFFF;
font-weight: bold;
text-align: center
}
</style>
</head>
<body>
<div id="divWelcome" class="redColor">
Click here to the replace the class of the element to the .greenColor.
</div>
<script type="text/javascript">
var divWelcome = document.getElementById("divWelcome");
divWelcome.onclick = function () {
divWelcome.className = "greenColor";
}
</script>
</body>
</html>
Append new classes to element
var divWelcome = document.getElementById("divWelcome");
divWelcome.className = divWelcome.className + " " + "new-class-name";
//OR
divWelcome.className += " new-class-name";
In above example we are appending the new class to the HTML element. So all the old classes of the HTML element will keep remain as well as new class named “new-class-name” will be added to the HTML element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Add & Remove the class to the HTML element using JavaScript</title>
<meta charset="utf-8" />
<style>
body {
padding: 0;
margin: 0;
}
.eleStyle {
height: 100px;
font-weight: bold;
text-align: center;
}
.addColor {
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="divWelcome" class="eleStyle">
Click here to add the new class to the element.
</div>
<script type="text/javascript">
var divWelcome = document.getElementById("divWelcome");
divWelcome.onclick = function () {
divWelcome.className = divWelcome.className + " " + "addColor";
}
</script>
</body>
</html>
Assign new class to the element
Remove the all the classes from the element
We can also remove all the classes of the element, just by assigned “”(empty) string to the className property.
Syntax:
var divWelcome = document.getElementById("divWelcome");
divWelcome.className = "";
So in above example all the classes of the element will be removed.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Add & Remove the class to the HTML element using JavaScript</title>
<meta charset="utf-8" />
<style>
body {
padding: 0;
margin: 0;
}
.eleStyle {
background-color: #FF0000;
height: 100px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="divWelcome" class="eleStyle">
Click here to remove all the classes of the element
</div>
<script type="text/javascript">
var divWelcome = document.getElementById("divWelcome");
divWelcome.onclick = function () {
divWelcome.className = "";
}
</script>
</body>
</html>
Remove the all the classes from the element
classList
All the modern browser supports the classList property to the element, which provides us the vary easy way to manipulate the classes of the HTML element like add the new class, remove class and check the class is exist or not.
This is vary easy to use than the className property.
classList property has the following methods to work with the classes of the element:
add(“class-name”) – It will add the new class
remove(“class-name”) – It will remove the specific class
toggle(“class-name”) – It will toggle the classes from between new and existing
contains(“class-name”) – It will check the specific class is exist or not
Add new class using the classList
Syntax:
var divWelcome = document.getElementById("element-id");
divWelcome.classList.add("className");
By using the add method of the classList property we can add the new property to the element.
It will simply append the class name to the element So all the old classes of the element will keep remain.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Add & Remove the class to the HTML element using JavaScript</title>
<meta charset="utf-8" />
<style>
body {
padding: 0;
margin: 0;
}
.eleStyle {
height: 100px;
font-weight: bold;
text-align: center;
}
.addColor {
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="divWelcome" class="eleStyle">
Click here to add the new class to the element.
</div>
<script type="text/javascript">
var divWelcome = document.getElementById("divWelcome");
divWelcome.onclick = function () {
divWelcome.classList.add("addColor");
}
</script>
</body>
</html>
Add new class using the classList
Remove the class name using the classList
We can also remove the class name from the element.
Syntax:
var divWelcome = document.getElementById("element-id");
divWelcome.classList.remove("className");
remove() method will remove the class name from the element if it is exist.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Add & Remove the class to the HTML element using JavaScript</title>
<meta charset="utf-8" />
<style>
body {
padding: 0;
margin: 0;
}
.eleStyle {
background-color: #FF0000;
height: 100px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="divWelcome" class="eleStyle">
Click here to remove the specific class name.
</div>
<script type="text/javascript">
var divWelcome = document.getElementById("divWelcome");
divWelcome.onclick = function () {
divWelcome.classList.remove("eleStyle");
}
</script>
</body>
</html>
Remove the class name using the classList
Toggle the class of the element
We can also toggle the classes of the element.
By toggle we can deactivated the old classes of the element and activate the new classes to the element. If we toggle more one time than old classes will be activated and new classes will deactivated.
Syntax:
var divWelcome = document.getElementById("element-id");
divWelcome.classList.toggle("className");
Example:
<!DOCTYPE html>
<html>
<head>
<title>Add & Remove the class to the HTML element using JavaScript</title>
<meta charset="utf-8" />
<style>
body {
padding: 0;
margin: 0;
}
.redColor {
background-color: #FF0000;
height: 100px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
.greenColor {
background-color: #00FF00;
height: 100px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="divWelcome" class="redColor">
Click here to the toggle the classes of the element.
</div>
<script type="text/javascript">
var divWelcome = document.getElementById("divWelcome");
divWelcome.onclick = function () {
divWelcome.classList.toggle("greenColor");
}
</script>
</body>
</html>
Toggle the class of the element
Check element have the specific class or not
We can also check that element have the specific class or not by the contains() method.
It will return the true if the class name is exist, otherwise it will return the false.
Syntax:
var divWelcome = document.getElementById("element-id");
var bExist = divWelcome.classList.contains("className");
Example:
<!DOCTYPE html>
<html>
<head>
<title>Add & Remove the class to the HTML element using JavaScript</title>
<meta charset="utf-8" />
<style>
body {
padding: 0;
margin: 0;
}
.redColor {
background-color: #FF0000;
height: 100px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="divWelcome" class="redColor">
Click here to check the class is exist or not
</div>
<script type="text/javascript">
var divWelcome = document.getElementById("divWelcome");
divWelcome.onclick = function () {
if (divWelcome.classList.contains("redColor")) {
alert("redColor class is exist");
}
else {
alert("redColor class is not exist");
}
}
</script>
</body>
</html>