日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 軟件

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

來源: 責(zé)編: 時(shí)間:2024-02-29 14:44:28 329觀看
導(dǎo)讀toggle的意思很簡單,表示“切換”,適用于兩個(gè)狀態(tài)之間的變化,不會(huì)出現(xiàn)第三者,就像這樣。web 中也有很多類似的api,一起看看有哪些吧。一、toggle首先是最常用的DOMTokenList.toggle方法,這里的的DOMTokenList表示一組空格分

dak28資訊網(wǎng)——每日最新資訊28at.com

toggle的意思很簡單,表示“切換”,適用于兩個(gè)狀態(tài)之間的變化,不會(huì)出現(xiàn)第三者,就像這樣。dak28資訊網(wǎng)——每日最新資訊28at.com

dak28資訊網(wǎng)——每日最新資訊28at.com

web 中也有很多類似的api,一起看看有哪些吧。dak28資訊網(wǎng)——每日最新資訊28at.com

一、toggle

首先是最常用的DOMTokenList.toggle方法,這里的的DOMTokenList表示一組空格分隔的標(biāo)記,最常見的就是Element.classList,比如。dak28資訊網(wǎng)——每日最新資訊28at.com

除了classList還有relList,不過應(yīng)該更少見了。dak28資訊網(wǎng)——每日最新資訊28at.com

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

通過el.classList可以獲取到 class 的詳細(xì)信息。dak28資訊網(wǎng)——每日最新資訊28at.com

dak28資訊網(wǎng)——每日最新資訊28at.com

看著像一個(gè)數(shù)組一樣,然后我們可以通過toggle方法去切換某個(gè)class,比如:dak28資訊網(wǎng)——每日最新資訊28at.com

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

此時(shí)會(huì)動(dòng)態(tài)去判斷,如果存在就移除,如果不存在就添加,再也不需要去判斷當(dāng)前狀態(tài)了。dak28資訊網(wǎng)——每日最新資訊28at.com

dak28資訊網(wǎng)——每日最新資訊28at.com

比如要切換頁面主題,可以直接這樣。dak28資訊網(wǎng)——每日最新資訊28at.com

// 深淺切換btn.onclcik = () => {  document.body.classList.toggle('dark')}// 無需像這樣if (當(dāng)前是深色) {  設(shè)置為淺色} else {  設(shè)置為深色}

另外,toggle還支持第二個(gè)參數(shù),表示強(qiáng)制,是一個(gè)布爾值,為 true表示添加,反之為移除,而「不管當(dāng)前是什么狀態(tài)」。dak28資訊網(wǎng)——每日最新資訊28at.com

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

比如:dak28資訊網(wǎng)——每日最新資訊28at.com

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

是不是非常方便呢?dak28資訊網(wǎng)——每日最新資訊28at.com

二、toggleAttribute

還有一個(gè)和toggle比較類似的是toggleAttribute,顧名思義,這個(gè)是用來切換「屬性」的,語法和前面一致。dak28資訊網(wǎng)——每日最新資訊28at.com

toggleAttribute(name)toggleAttribute(name, force)

這個(gè)使用場景更為廣泛,例如控制一個(gè)輸入框的禁用與開啟。dak28資訊網(wǎng)——每日最新資訊28at.com

input.toggleAttribute('disabled')

當(dāng)然對(duì)于表單元素,還可以用.的方式直接設(shè)置。dak28資訊網(wǎng)——每日最新資訊28at.com

input.disabled = !input.disabled;

但是,對(duì)于普通自定義屬性,就不能用這種方式了,比如黑暗模式,用屬性來控制。dak28資訊網(wǎng)——每日最新資訊28at.com

document.body.toggleAttribute('dark');

第二個(gè)參數(shù)也是類似的。dak28資訊網(wǎng)——每日最新資訊28at.com

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

當(dāng)然你還可以用更常規(guī)的方式。dak28資訊網(wǎng)——每日最新資訊28at.com

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

個(gè)人覺得不如toggleAttribute優(yōu)雅,你覺得呢?dak28資訊網(wǎng)——每日最新資訊28at.com

三、togglePopover

togglePopover是新出來的,是針對(duì)popover元素推出的打開與關(guān)閉的方法。dak28資訊網(wǎng)——每日最新資訊28at.com

關(guān)于popover,可以參考我之前寫的這篇文章:原生 popover 終于來了!dak28資訊網(wǎng)——每日最新資訊28at.com

語法略有差異,因?yàn)闊o需修改其他狀態(tài),所以只有一個(gè)可選參數(shù)。dak28資訊網(wǎng)——每日最新資訊28at.com

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

另外,帶有的參數(shù)的情況下還有更直觀的 api,推薦使用。dak28資訊網(wǎng)——每日最新資訊28at.com

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

比較新,是跟著popver一起出現(xiàn)的,兼容性如下:dak28資訊網(wǎng)——每日最新資訊28at.com

dak28資訊網(wǎng)——每日最新資訊28at.com

四、toggle event

最后再來介紹一個(gè)toggle事件,表示監(jiān)聽切換事件。dak28資訊網(wǎng)——每日最新資訊28at.com

這個(gè)也是跟隨poperver推出的,可以通過event對(duì)象獲取當(dāng)前的新狀態(tài)和舊狀態(tài),如下:dak28資訊網(wǎng)——每日最新資訊28at.com

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

效果如下:dak28資訊網(wǎng)——每日最新資訊28at.com

dak28資訊網(wǎng)——每日最新資訊28at.com

有意思的是,這個(gè)事件同時(shí)也支持details元素。dak28資訊網(wǎng)——每日最新資訊28at.com

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

dak28資訊網(wǎng)——每日最新資訊28at.com

五、總結(jié)一下

以上就是 web 中幾個(gè)和toggle相關(guān)的api了,下面總結(jié)一下:dak28資訊網(wǎng)——每日最新資訊28at.com

  • 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)閉事件。

本文鏈接:http://www.www897cc.com/showinfo-26-75383-0.html查漏補(bǔ)缺,盤點(diǎn)和Toggle相關(guān)的幾個(gè)API

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。郵件:2376512515@qq.com

上一篇: 基于C#編寫一個(gè)遠(yuǎn)程桌面應(yīng)用

下一篇: 只用 13 天,OpenAI 做出了能聽、能說、能自主決策的機(jī)器人大模型

標(biāo)簽:
  • 熱門焦點(diǎn)
Top 主站蜘蛛池模板: 晋州市| 西宁市| 苏尼特右旗| 浏阳市| 鹰潭市| 青川县| 南溪县| 石首市| 光山县| 江都市| 崇信县| 张家界市| 英德市| 青州市| 赤峰市| 四川省| 瑞昌市| 屯留县| 洛阳市| 山丹县| 新疆| 长乐市| 眉山市| 伊宁市| 双辽市| 宁化县| 兴安盟| 德庆县| 高青县| 寻乌县| 旌德县| 太谷县| 霞浦县| 沁阳市| 三河市| 敦化市| 平遥县| 汶川县| 繁昌县| 通道| 师宗县|