此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

DOMTokenList.toggle()

基线 广泛可用

自 2015年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

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);

规范

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

浏览器兼容性