DOMTokenList: toggle() 方法
DOMTokenList 介面的 toggle() 方法會移除列表中的一個現有 token 並返回 false。如果 token 不存在，則會新增該 token 並返回 true。
語法
js
toggle(token)
toggle(token, force)
引數
返回值
一個布林值，true 或 false，指示呼叫後 token 是否在列表中。
示例
點選時切換 class
在以下示例中，我們使用 Element.classList 獲取一個 <span> 元素的 class 列表，並將其作為 DOMTokenList 進行處理。然後，我們替換列表中的一個 token，並將更新後的列表寫入 <span> 的 Node.textContent。
首先，HTML 程式碼
html
<span class="a b">classList is 'a b'</span>
現在是 JavaScript 程式碼
js
const span = document.querySelector("span");
const classes = span.classList;
span.addEventListener("click", () => {
const result = classes.toggle("c");
span.textContent = `'c' ${
result ? "added" : "removed"
}; classList is now "${classes}".`;
});
輸出如下所示，並且每次點選文字時都會發生變化
設定 force 引數
第二個引數可用於確定是否包含 class。此示例僅當瀏覽器視窗寬度大於 1000 畫素時才包含 'c' class。
js
span.classList.toggle("c", window.innerWidth > 1000);
規範
| 規範 |
|---|
| DOM # ref-for-dom-domtokenlist-toggle① |
瀏覽器相容性
載入中…