·悄然 - 2025-3-7 20:53
·悄然 - 2025-3-7 18:24
·飞飞 - 2025-3-5 18:47
·马黑 - 2025-3-5 11:58
·飞飞 - 2025-3-3 19:26
·小希 - 2025-2-28 19:08
·马黑 - 2025-2-26 17:47
·飞飞 - 2025-2-26 15:07
·悄然 - 2025-2-26 15:06
JS实现toggle功能的简单探讨
JavaScript并没有toggle函数或方法，不过基于元素的classList属性带有一个toggle方法，它可以操作元素的class列表中指定的class即类，具体表现是将该类或添加到元素中来或从元素class列表中移除，从而达成基于元素class的两种模态的来回切换。试看如下的CSS+HTML代码：
<style>
.divbox {
margin: 20px auto;
border: 1px solid gray;
width: 400px;
height: 200px;
background: pink;
}
.bg666 { background: #666; }
</style>
<div class="divbox"></div>
观察上面的代码，div元素已经使用了一个class属性divbox，该属性在CSS中设计了几个基本样式，其中有粉色背景。现在我们想通过另一个class属性即CSS中的 .bg666 来改变其背景色为 #666 并且随后能够在这两种背景色之间来回切换。实现这样的功能其方法术语称作 toggle，即某种属性在两种状态之间来回切换，这和电源的开/关是同一个道理。为了展示前述基于class列表的 toggle 我们另起一组代码，用JS的 element.classList.toggle 方法给div元素加上 toggle 开关：
<style>
.mybox {
margin: 20px auto;
border: 1px solid gray;
width: 400px;
height: 200px;
background: pink;
}
.bg666 { background: #666; }
</style>
<div class="mybox" title="点击更换背景"></div>
<script>
var mybox = document.querySelector('.mybox');
mybox.onclick = () => {
mybox.classList.toggle('bg666');
//console.log(mybox.classList.value);//打印当前class列表
};
</script>
元素列表的 toggle 方法需要一个参数：HTML元素的class属性名称，该类属性设置由CSS预定义，对应的名称是（点+名称），这样JS就可以调用业已存在的备用CSS class类定义针对指定属性（如背景颜色或更复杂的样式）来覆盖渲染元素，并且可以和原先的指定属性所设置的渲染效果来回切换。切换的方式其实是加入或移除备用CSS class类属性，可以通过打印 classList.value 值印证。效果如下：
效果
JS框架元老之一的JQuery封装有一个 toggle 方法，在切换元素属性或其他功能时非常方便。原生JS其实也可以做到这一点，实现方式要自己编程但并非复杂，试看如下例子：
<style>
.mybox1 {
margin: 20px auto;
border: 1px solid gray;
width: 400px;
height: 200px;
background: tan;
}
</style>
<div class="mybox1" title="点击更换背景"></div>
<script>
//自编toggle函数 ：元素CSS属性值二模态切换
toggleAttrVal = (elm, attrName, val) => elm.style[attrName] = elm.style[attrName] === val ? '' : val;
//应用实例 ：改变元素背景
var mybox1 = document.querySelector('.mybox1');
mybox1.onclick = () => toggleAttrVal(mybox1, 'background', 'teal');
</script>
函数 toggleAttrVal 有三个形参：elm 是元素，attrName 是CSS属性名，val 是属性值。函数通过判断指定元素 elm 的指定属性 attrName 的值是否等于传来的参数值 val，若等于，元素的属性值等于空即还原初始设置，反之令其等于 val 值。以下是运行效果：
效果
上例只是一个简单的示例，我们从中得到的启发是，我们可以使用原生的JS实现所需的 toggle 功能。
前一篇: JS ：使用快捷键操控audio控件
下一篇: css媒体查询
评论列表 [0条]
