HTML - DOMTokenList toggle() Method

Quiz

HTML DOMTokenList toggle() method dynamically adds or removes a token or class from an element's class attribute. You can switch between different classes using toggle() method.

It removes an existing token returning false and if the token is not present in the token list then the token is added to list and returned true.

Syntax

domtokenlist.toggle(token);

Parameter

This method accepts two parameters as listed below.

Parameter	Description
token	It represents the token which is to be toggled. It is a required parameter.
force	It is optional parameter having boolean value which turns toggle into one way operation. If set true, tokens only get added and not removed when set false, tokens only get removed and not added.

Return Value

It returns a boolean value which represents whether the token is in the token list or not after the call.

Example of HTML DOMTokenList 'toggle()' Method

In the following example, we have used toggle() method to switch to different class having class name ='white'./p>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOMTokenList toggle() Method</title>
    <style>
        .color {
            background-color: #04af2f;
            color: white;
        }
        .font {
            font-size: 40px;
        }
        .align {
            text-align: center;
        }
        .white {
            background-color: rgb(122, 200, 234);
        }
    </style>
</head>
<body>
    <button onclick="fun()">Click me</button>
    <p id="add" class="color font align">Welcome to Tutorials Point...</p>
    <p id="white"></p>
    <script>
        function fun() {
            let x = document.getElementById("add").classList;
            x.toggle("white");
        }
    </script>
</body>
</html>

Supported Browsers

Method
toggle()	Yes 8	Yes 12	Yes 3.6	Yes 5.1	Yes 12.1

html_dom.htm

Print Page