DOMTokenList.toggle()
DOMTokenList
接口的 toggle()
方法从列表中删除一个给定的标记并返回 false
。如果标记不存在,则添加并且函数返回 true
。
语法
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);
规范
Specification |
---|
DOM Standard # ref-for-dom-domtokenlist-toggle① |
浏览器兼容性
BCD tables only load in the browser