查漏补缺，盘点和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元素的打开和关闭事件

归类学习整理还是挺不错的。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发 ❤❤❤

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