JS实现toggle功能的简单探讨

马黑黑 · 发表于 2025-3-3 20:03

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-3-3 20:04 编辑

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 功能。