toggle的意思很简单，表示“切换”，适用于两个状态之间的变化，不会出现第三者，就像这样。
web 中也有很多类似的api，一起看看有哪些吧。
首先是最常用的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)}是不是非常方便呢？
还有一个和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是新出来的，是针对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事件，表示监听切换事件。
这个也是跟随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了，下面总结一下：
本文链接：http://www.28at.com/showinfo-26-75383-0.html查漏补缺，盘点和Toggle相关的几个API
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 基于C#编写一个远程桌面应用
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号