总结web 中几个和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元素推出的打开与关闭的方法。

语法略有差异，因为无需修改其他状态，所以只有一个可选参数：

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元素的打开和关闭事件

以上关于总结web 中几个和toggle相关的API的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。