toggle的意思很簡單，表示“切換”，適用于兩個(gè)狀態(tài)之間的變化，不會(huì)出現(xiàn)第三者，就像這樣。

web 中也有很多類似的api，一起看看有哪些吧。

一、toggle

首先是最常用的DOMTokenList.toggle方法，這里的的DOMTokenList表示一組空格分隔的標(biāo)記，最常見的就是Element.classList，比如。

除了classList還有relList，不過應(yīng)該更少見了。

<div class="a b c"></div>

通過el.classList可以獲取到 class 的詳細(xì)信息。

看著像一個(gè)數(shù)組一樣，然后我們可以通過toggle方法去切換某個(gè)class，比如：

el.classList.toggle('a'); // 移除 a
el.classList.toggle('a'); // 添加 a

此時(shí)會(huì)動(dòng)態(tài)去判斷，如果存在就移除，如果不存在就添加，再也不需要去判斷當(dāng)前狀態(tài)了。

比如要切換頁面主題，可以直接這樣。

// 深淺切換
btn.onclcik = () => {
  document.body.classList.toggle('dark')
}

// 無需像這樣
if (當(dāng)前是深色) {
  設(shè)置為淺色
} else {
  設(shè)置為深色
}

另外，toggle還支持第二個(gè)參數(shù)，表示強(qiáng)制，是一個(gè)布爾值，為 true表示添加，反之為移除，而「不管當(dāng)前是什么狀態(tài)」。

el.classList.toggle('a', force);

比如：

// 設(shè)置為淺色
btnLight.onclcik = () => {
  document.body.classList.toggle('dark', false)
}
// 設(shè)置為深色
btnDark.onclcik = () => {
  document.body.classList.toggle('dark', true)
}

是不是非常方便呢？

二、toggleAttribute

還有一個(gè)和toggle比較類似的是toggleAttribute，顧名思義，這個(gè)是用來切換「屬性」的，語法和前面一致。

toggleAttribute(name)
toggleAttribute(name, force)

這個(gè)使用場景更為廣泛，例如控制一個(gè)輸入框的禁用與開啟。

input.toggleAttribute('disabled')

當(dāng)然對(duì)于表單元素，還可以用.的方式直接設(shè)置。

input.disabled = !input.disabled;

但是，對(duì)于普通自定義屬性，就不能用這種方式了，比如黑暗模式，用屬性來控制。

document.body.toggleAttribute('dark');

第二個(gè)參數(shù)也是類似的。

document.body.toggleAttribute('dark', ture); //添加dark屬性
document.body.toggleAttribute('dark', false);//移除dark屬性

當(dāng)然你還可以用更常規(guī)的方式。

document.body.setAttribute('dark', ''); //添加dark屬性
document.body.removeAttribute('dark');//移除dark屬性

個(gè)人覺得不如toggleAttribute優(yōu)雅，你覺得呢？

三、togglePopover

togglePopover是新出來的，是針對(duì)popover元素推出的打開與關(guān)閉的方法。

關(guān)于popover，可以參考我之前寫的這篇文章：原生 popover 終于來了！

語法略有差異，因?yàn)闊o需修改其他狀態(tài)，所以只有一個(gè)可選參數(shù)。

popoverEl.togglePopover(); //切換 popover
popoverEl.togglePopover(true); //打開 popover
popoverEl.togglePopover(false); //關(guān)閉 popover

另外，帶有的參數(shù)的情況下還有更直觀的 api，推薦使用。

// 打開
popoverEl.togglePopover(true)
// 等同于
popoverEl.showPopover()

// 關(guān)閉
popoverEl.togglePopover(false)
// 等同于
popoverEl.hidePopover()

比較新，是跟著popver一起出現(xiàn)的，兼容性如下：

四、toggle event

最后再來介紹一個(gè)toggle事件，表示監(jiān)聽切換事件。

這個(gè)也是跟隨poperver推出的，可以通過event對(duì)象獲取當(dāng)前的新狀態(tài)和舊狀態(tài)，如下：

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover has been shown");
  } else {
    console.log("Popover has been hidden");
  }
});

效果如下：

有意思的是，這個(gè)事件同時(shí)也支持details元素。

details.addEventListener("toggle", (event) => {
  
});

五、總結(jié)一下

以上就是 web 中幾個(gè)和toggle相關(guān)的api了，下面總結(jié)一下：

• toggle作用在DOMTokenList上，通常是classList ， classList.toggle可以切換class。
• toggle還支持第二個(gè)參數(shù)，用于強(qiáng)制添加或者移出某個(gè)class。
• toggleAttribute可以控制屬性的切換。
• togglePopver是專門推出用于控制popover元素打開和關(guān)閉的方法。
• toggle event可以監(jiān)聽popover元素和details元素的打開和關(guān)閉事件。