关于前端:查漏补缺盘点和toggle相关的几个API

欢送关注我的公众号：前端侦探

toggle的意思很简略，示意“切换”，实用于两个状态之间的变动，不会呈现第三者，就像这样

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

一、toggle

首先是最罕用的 DOMTokenList.toggle 办法，这里的的 DOMTokenList 示意一组空格分隔的标记，最常见的就是Element.classList，比方

除了 classList 还有relList，不过应该更少见了

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

通过 el.classList 能够获取到 class 的详细信息

看着像一个数组一样，而后咱们能够通过 toggle 办法去切换某个class，比方

el.classList.toggle('a'); // 移除 a
el.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)
}

是不是十分不便呢？

二、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 一起呈现的，兼容性如下

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

成果如下

有意思的是，这个事件同时也反对 details 元素

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

五、总结一下

以上就是 web 中几个和 toggle 相干的 api 了，上面总结一下

1. toggle作用在 DOMTokenList 上，通常是 classList ，classList.toggle 能够切换class
2. toggle还反对第二个参数，用于强制增加或者移出某个class
3. toggleAttribute能够管制属性的切换
4. togglePopver是专门推出用于管制 popover 元素关上和敞开的办法
5. toggle event能够监听 popover 元素和 details 元素的关上和敞开事件

归类学习整顿还是挺不错的。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发 ❤❤❤

欢送关注我的公众号：前端侦探