查漏補缺，盤點和toggle相關的幾個API

發表於2024-02-26
API
歡迎關注我的公眾號：前端偵探

toggle的意思很簡單，表示“切換”，適用於兩個狀態之間的變化，不會出現第三者，就像這樣

CSS & JavaScript Toggle Button | Dark and Light Mode

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

一、toggle

首先是最常用的DOMTokenList.toggle方法，這裡的的DOMTokenList表示一組空格分隔的標記，最常見的就是Element.classList，比如

除了classList還有relList，不過應該更少見了
<div class="a b c"></div>

透過el.classList可以獲取到 class 的詳細資訊

image-20240220191322449

看著像一個陣列一樣，然後我們可以透過toggle方法去切換某個class，比如

el.classList.toggle('a'); // 移除 a
el.classList.toggle('a'); // 新增 a

此時會動態去判斷，如果存在就移除，如果不存在就新增，再也不需要去判斷當前狀態了

image-20240220191632355

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

// 深淺切換
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一起出現的，相容性如下

image-20240221201559148

四、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");
  }
});

效果如下

image-20240221202632884

有意思的是，這個事件同時也支援details元素

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

image-20240221202735710

五、總結一下

以上就是 web 中幾個和toggle相關的api了，下面總結一下

  1. toggle作用在DOMTokenList上，通常是classList ， classList.toggle可以切換class
  2. toggle還支援第二個引數，用於強制新增或者移出某個class
  3. toggleAttribute可以控制屬性的切換
  4. togglePopver是專門推出用於控制popover元素開啟和關閉的方法
  5. toggle event可以監聽popover元素和details元素的開啟和關閉事件

歸類學習整理還是挺不錯的。最後，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發 ❤❤❤

歡迎關注我的公眾號：前端偵探

相關文章