查漏補(bǔ)缺,盤點(diǎn)和Toggle相關(guān)的幾個(gè)API

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

web 中也有很多類似的api,一起看看有哪些吧。
一、toggle
首先是最常用的DOMTokenList.toggle方法,這里的的DOMTokenList表示一組空格分隔的標(biāo)記,最常見(jiàn)的就是Element.classList,比如。
除了classList還有relList,不過(guò)應(yīng)該更少見(jiàn)了。
<div class="a b c"></div>通過(guò)el.classList可以獲取到 class 的詳細(xì)信息。

看著像一個(gè)數(shù)組一樣,然后我們可以通過(guò)toggle方法去切換某個(gè)class,比如:
el.classList.toggle('a'); // 移除 a
el.classList.toggle('a'); // 添加 a此時(shí)會(huì)動(dòng)態(tài)去判斷,如果存在就移除,如果不存在就添加,再也不需要去判斷當(dāng)前狀態(tài)了。

比如要切換頁(yè)面主題,可以直接這樣。
// 深淺切換
btn.onclcik = () => {
document.body.classList.toggle('dark')
}
// 無(wú)需像這樣
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è)是用來(lái)切換「屬性」的,語(yǔ)法和前面一致。
toggleAttribute(name)
toggleAttribute(name, force)這個(gè)使用場(chǎng)景更為廣泛,例如控制一個(gè)輸入框的禁用與開啟。
input.toggleAttribute('disabled')當(dāng)然對(duì)于表單元素,還可以用.的方式直接設(shè)置。
input.disabled = !input.disabled;但是,對(duì)于普通自定義屬性,就不能用這種方式了,比如黑暗模式,用屬性來(lái)控制。
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è)人覺(jué)得不如toggleAttribute優(yōu)雅,你覺(jué)得呢?
三、togglePopover
togglePopover是新出來(lái)的,是針對(duì)popover元素推出的打開與關(guān)閉的方法。
關(guān)于popover,可以參考我之前寫的這篇文章:原生 popover 終于來(lái)了!
語(yǔ)法略有差異,因?yàn)闊o(wú)需修改其他狀態(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
最后再來(lái)介紹一個(gè)toggle事件,表示監(jiān)聽(tīng)切換事件。
這個(gè)也是跟隨poperver推出的,可以通過(guò)event對(duì)象獲取當(dāng)前的新?tīng)顟B(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)聽(tīng)popover元素和details元素的打開和關(guān)閉事件。



























