toggle的意思很簡單,表示“切換”,適用于兩個狀態之間的變化,不會出現第三者,就像這樣。
web 中也有很多類似的api,一起看看有哪些吧。
首先是最常用的DOMTokenList.toggle方法,這里的的DOMTokenList表示一組空格分隔的標記,最常見的就是Element.classList,比如。
除了classList還有relList,不過應該更少見了。
<div class="a b c"></div>
通過el.classList可以獲取到 class 的詳細信息。
看著像一個數組一樣,然后我們可以通過toggle方法去切換某個class,比如:
el.classList.toggle('a'); // 移除 ael.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)}
是不是非常方便呢?
還有一個和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是新出來的,是針對popover元素推出的打開與關閉的方法。
關于popover,可以參考我之前寫的這篇文章:原生 popover 終于來了!
語法略有差異,因為無需修改其他狀態,所以只有一個可選參數。
popoverEl.togglePopover(); //切換 popoverpopoverEl.togglePopover(true); //打開 popoverpopoverEl.togglePopover(false); //關閉 popover
另外,帶有的參數的情況下還有更直觀的 api,推薦使用。
// 打開popoverEl.togglePopover(true)// 等同于popoverEl.showPopover()// 關閉popoverEl.togglePopover(false)// 等同于popoverEl.hidePopover()
比較新,是跟著popver一起出現的,兼容性如下:
最后再來介紹一個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了,下面總結一下:
本文鏈接:http://www.www897cc.com/showinfo-26-75383-0.html查漏補缺,盤點和Toggle相關的幾個API
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 基于C#編寫一個遠程桌面應用