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

列印頁面

上一個

下一個