语法
js
toggle(token);
toggle(token, force);
参数
返回值
一个布尔值,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①> |