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① |
浏览器兼容性
加载中…