DOMTokenList.toggle()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

DOMTokenList 接口的 toggle() 方法从列表中删除一个给定的标记并返回 false。如果标记不存在，则添加并且函数返回 true。

语法

js
toggle(token);
toggle(token, force);

参数

token

一个字符串，表示你想要 toggle 的标记。

force 可选

如果包含该值，设置后会将方法变成单向操作。如果设置为 false，仅会删除标记列表中匹配的给定标记，且不会再度添加。如果设置为 true，仅在标记列表中添加给定标记，且不会再度删除。

返回值

一个布尔值，true 或者 false，表示在调用 toggle 后，标记是否存在于列表中。

示例

在点击后 toggle class

以下示例我们使用 Element.classList 检索 <span> 元素的 class 集合列表（其返回值为 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");

  if (result) {
    span.textContent = `'c' added; classList is now "${classes}".`;
  } else {
    span.textContent = `'c' removed; classList is now "${classes}".`;
  }
});

输出如下所示，并且每次点击文本时都会发生变化：

设置 force 参数

第二个参数可以用于决定是否包含 class 属性。这个例子仅在浏览器窗口宽度超过 1000 像素时才会包含‘c’属性。

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

规范

Specification
DOM Standard
# ref-for-dom-domtokenlist-toggle①

浏览器兼容性

BCD tables only load in the browser