How to Toggle an Element Class in JavaScript ?

16 Apr, 2020
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(), 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 DOMTokenList object, and is used to toggle between the classes
Method 1: By Using 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 button’s ID is “Button”. Copy this code inside the <head> of the html page.
<style>
    .paragraphClass {
        font-size: 30px;
        color: red;
    }

    #Button {
        margin-top: 15px;
    }
</style>

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.
<script>
    function myFunc() {
        var para = document.getElementById("p");
        para.classList.toggle("paragraphClass");
    }
</script>

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() {            var 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:
Without Clicking the Button:
After Clicking the Button Once:
After Clicking the Button Twice:
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”. Copy this code inside the <head> of the html page.
<style>
    .paragraphClass {
        font-size: 30px;
        color: red;
    }

    #Button {
        margin-top: 15px;
    }
</style>

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.
<script>
function myFunc() {
    var para = document.getElementById("p");

    if(para.classList.contains("paragraphClass")) {
        para.classList.remove("paragraphClass");
    }
    else {
        para.classList.add("paragraphClass");
    }
}
</script>

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() {            var 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:
Without Clicking the Button:
After Clicking the Button Once:
After Clicking the Button Twice:
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.