HTML - DOMTokenList toggle() 方法

HTML DOMTokenList toggle() 方法动态添加或删除元素 class 属性中的标记或类。您可以使用 toggle() 方法在不同的类之间切换。

它删除现有的标记并返回 false，如果标记不存在于标记列表中，则将标记添加到列表中并返回 true。

语法

domtokenlist.toggle(token);

参数

此方法接受以下列出的两个参数。

参数	描述
token	它表示要切换的标记。它是必需的参数。
force	它是一个可选参数，具有布尔值，将切换变成单向操作。如果设置为 true，则标记仅被添加而不被删除；如果设置为 false，则标记仅被删除而不被添加。

返回值

它返回一个布尔值，表示调用后标记是否在标记列表中。

HTML DOMTokenList 'toggle()' 方法示例

在以下示例中，我们使用了 toggle() 方法切换到具有类名“white”的不同类。

<!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>

支持的浏览器

方法
toggle()	是 8	是 12	是 3.6	是 5.1	是 12.1

html_domtokenlist_reference.htm

打印页面

上一个

下一个