Toggling the class means if there is no class name assigned to the element, then a class name can be assigned to it dynamically or if a certain class is already present, then it can be removed dynamically by just using the toggle() or by using contains(), add(), remove() methods of DOMTokenList object within JavaScript.
Properties of HTML elements being used:
- classList: This property returns the class name(s) of the element as a DOMTokenList object. This object has some well-known methods including contains(), add(), remove(), and toggle().
- contains(): This method returns a boolean value indicating if a particular class name is present or not.
- add(): This method is used to add one or more class names to an element.
- remove(): This method is used to remove one or more class names from an element.
- toggle(): This method belongs to the DOMTokenList object, and is used to toggle between the classes
These are the following methods for toggling an element Class:
Method 1: By Using the toggle() method
Let’s first make a template of the HTML file that includes a paragraph tag and a button tag. After that let’s apply some style for the class that is to be toggled. In our example, the class name is “paragraphClass” and the button’s ID is “Button”. Now, let’s write the script for toggling the class. Following is the script, that is to be written within <head> of the html page. In this method, we will use the toggle() function for toggling the class names.
Example: Let’s get to the working example by combining all the concepts described above.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Geeks for Geeks</title>
<style>
.paragraphClass {
font-size: 30px;
color: red;
}
#Button {
margin-top: 15px;
}
</style>
<script>
function myFunc() {
let para = document.getElementById("p");
para.classList.toggle("paragraphClass");
}
</script>
</head>
<body>
<p id="p">
Click on the button to toggle
between the class to see the
effects
</p>
<button id="Button" onclick="myFunc()">
Click Me
</button>
</body>
</html>
|
Output:
How to Toggle an Element Class in JavaScript ?
Method 2: By Using contains(), add() and remove() method:
Let’s first make a template of the HTML file that includes a paragraph tag and a button tag. After that let’s apply some style for the class that is to be toggled. In our example, the class name is “paragraphClass” and button’s ID is “Button”.
Now, let’s write the script for toggling the class. Following is the script, that is to be written within the <head> of the html page. In this method, we will use the contains(), add(), remove() method for toggling the class names. The trick here is that we will check whether a particular class is present or not using contains() method, and then we will add or remove the class names from the element using add() or remove() respectively.
Example: Let’s get to the working example by combining all the concepts described above.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Geeks for Geeks</title>
<style>
.paragraphClass {
font-size: 30px;
color: red;
}
#Button {
margin-top: 15px;
}
</style>
<script>
function myFunc() {
let para = document.getElementById("p");
if (para.classList.contains("paragraphClass")) {
para.classList.remove("paragraphClass");
}
else {
para.classList.add("paragraphClass");
}
}
</script>
</head>
<body>
<p id="p">
Click on the button to toggle
between the class to see the
effects
</p>
<button id="Button" onclick="myFunc()">
Click Me
</button>
</body>
</html>
|
Output:
How to Toggle an Element Class in JavaScript ?