DOMTokenList: toggle() 方法

toggle() 是 DOMTokenList 接口的方法，它从列表中移除现有的标记并返回 false。如果标记不存在，则添加它并返回 true。

语法

js
toggle(token)
toggle(token, force)

参数

token

表示要切换的标记的字符串。

force 可选

如果包含，则将切换转换为单向操作。如果设置为 false，则 token 仅 会被移除，不会被添加。如果设置为 true，则 token 仅 会被添加，不会被移除。

返回值

一个布尔值，true 或 false，指示调用后 token 是否在列表中。

示例

单击切换类

在以下示例中，我们使用 Element.classList 检索设置为 <span> 元素的类列表，并将其作为 DOMTokenList。然后，我们替换列表中的标记，并将列表写入 <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 参数

第二个参数可用于确定是否包含该类。此示例仅在浏览器窗口宽度超过 1000 像素时才包含 'c' 类

js
span.classList.toggle("c", window.innerWidth > 1000);

规范

规范
DOM 标准
# ref-for-dom-domtokenlist-toggle①

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。