JavaScript多个按钮实现切换不同的颜色

红颜不简

已于 2022-11-29 17:55:45 修改

阅读量2.8k

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-11-29 17:55:19 首次发布

本文链接：https://blog.youkuaiyun.com/YIC020920/article/details/128102103

版权

JavaScript 事件处理代码优化 DOM操作动态绑定

关键词由优快云通过智能技术生成

本文探讨了如何通过优化JavaScript代码来减少重复性工作，以提高事件处理效率。首先展示了原始的代码实现，通过为每个按钮单独设置点击事件来改变背景颜色。然后逐步优化，从分别获取和绑定事件到使用函数参数动态绑定，再到利用HTML内联事件直接调用函数。最后提出思考，若需处理更多事件，可以考虑动态实现，如使用颜色数组配合遍历。该文旨在引导读者思考和实践代码优化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次案例主要是通过获取元素，元素实现点击事件触发给另一个元素修改成另一种样式。

首先看一下第一个版本，非常麻烦，但是实现起来相对比较容易。

展示一下它的div情况，css样式你们可以自行设计哈！

<div id="content">
	<button type="button" id="but01">红色</button>
	<button type="button" id="but02">蓝色</button>
	<button type="button" id="but03">绿色</button>
	<button type="button" id="but04">重置</button>
	<div class="side" id="mybox"> // 这里应该使用驼峰命名,自行修改一下
		这里是显示背景的框
	</div>
</div>

第一个JavaScript的版本，一个蠢方法，仅供参考，一定将它要改进优化掉。

// 一个个的获取到元素
var but01 = document.getElementById("but01");
var but02 = document.

最低0.47元/天解锁文章