查漏補缺，盤點和Toggle相關的幾個API
toggle的意思很簡單，表示“切換”，適用于兩個狀態之間的變化，不會出現第三者，就像這樣。
web 中也有很多類似的api，一起看看有哪些吧。
一、toggle
首先是最常用的DOMTokenList.toggle方法，這里的的DOMTokenList表示一組空格分隔的標記，最常見的就是Element.classList，比如。
除了classList還有relList，不過應該更少見了。
<div class="a b c"></div>通過el.classList可以獲取到 class 的詳細信息。
看著像一個數組一樣，然后我們可以通過toggle方法去切換某個class，比如：
el.classList.toggle('a'); // 移除 a
el.classList.toggle('a'); // 添加 a此時會動態去判斷，如果存在就移除，如果不存在就添加，再也不需要去判斷當前狀態了。
比如要切換頁面主題，可以直接這樣。
// 深淺切換
btn.onclcik = () => {
document.body.classList.toggle('dark')
}
// 無需像這樣
if (當前是深色) {
設置為淺色
} else {
設置為深色
}另外，toggle還支持第二個參數，表示強制，是一個布爾值，為 true表示添加，反之為移除，而「不管當前是什么狀態」。
el.classList.toggle('a', force);比如：
// 設置為淺色
btnLight.onclcik = () => {
document.body.classList.toggle('dark', false)
}
// 設置為深色
btnDark.onclcik = () => {
document.body.classList.toggle('dark', true)
}是不是非常方便呢？
二、toggleAttribute
還有一個和toggle比較類似的是toggleAttribute，顧名思義，這個是用來切換「屬性」的，語法和前面一致。
toggleAttribute(name)
toggleAttribute(name, force)這個使用場景更為廣泛，例如控制一個輸入框的禁用與開啟。
input.toggleAttribute('disabled')當然對于表單元素，還可以用.的方式直接設置。
input.disabled = !input.disabled;但是，對于普通自定義屬性，就不能用這種方式了，比如黑暗模式，用屬性來控制。
document.body.toggleAttribute('dark');第二個參數也是類似的。
document.body.toggleAttribute('dark', ture); //添加dark屬性
document.body.toggleAttribute('dark', false);//移除dark屬性當然你還可以用更常規的方式。
document.body.setAttribute('dark', ''); //添加dark屬性
document.body.removeAttribute('dark');//移除dark屬性個人覺得不如toggleAttribute優雅，你覺得呢？
三、togglePopover
togglePopover是新出來的，是針對popover元素推出的打開與關閉的方法。
關于popover，可以參考我之前寫的這篇文章：原生 popover 終于來了！
語法略有差異，因為無需修改其他狀態，所以只有一個可選參數。
popoverEl.togglePopover(); //切換 popover
popoverEl.togglePopover(true); //打開 popover
popoverEl.togglePopover(false); //關閉 popover另外，帶有的參數的情況下還有更直觀的 api，推薦使用。
// 打開
popoverEl.togglePopover(true)
// 等同于
popoverEl.showPopover()
// 關閉
popoverEl.togglePopover(false)
// 等同于
popoverEl.hidePopover()比較新，是跟著popver一起出現的，兼容性如下：
四、toggle event
最后再來介紹一個toggle事件，表示監聽切換事件。
這個也是跟隨poperver推出的，可以通過event對象獲取當前的新狀態和舊狀態，如下：
popover.addEventListener("toggle", (event) => {
if (event.newState === "open") {
console.log("Popover has been shown");
} else {
console.log("Popover has been hidden");
}
});效果如下：
有意思的是，這個事件同時也支持details元素。
details.addEventListener("toggle", (event) => {
});
五、總結一下
以上就是 web 中幾個和toggle相關的api了，下面總結一下：
- toggle作用在DOMTokenList上，通常是classList ， classList.toggle可以切換class。
- toggle還支持第二個參數，用于強制添加或者移出某個class。
- toggleAttribute可以控制屬性的切換。
- togglePopver是專門推出用于控制popover元素打開和關閉的方法。
- toggle event可以監聽popover元素和details元素的打開和關閉事件。
