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

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'); // 移除 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)}

是不是十分不便呢？

二、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(); //切换 popoverpopoverEl.togglePopover(true); //关上 popoverpopoverEl.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元素的关上和敞开事件

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

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