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

红颜不简

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

阅读量2.5k

点赞数 3

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

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

本文链接：https://blog.csdn.net/YIC020920/article/details/128102103

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

展示一下它的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.getElementById("but02");
var but03 = document.getElementById("but03");
var but04 = document.getElementById("but04");
var mybox = document.getElementById("mybox");
// 并且一个个的添加事件
but01.onclick = function () {
	mybox.style.background = "red";
}
but02.onclick = function () {
	mybox.style.background = "yellow";
}
but03.onclick = function () {
	mybox.style.background = "green";
}
but04.onclick = function () {
	mybox.style.background = "#eb8686";
}
// 缺点：代码重复性大，工作量剧增。

第二个JavaScript的版本，这个版本实现了、、优化，运用到调用有参函数的知识点，整体还是比较好理解的。仅供参考，依然有需要优化的地方，发挥你的想象去思考吧！div样式的中的id需要调整一下，你们结合Script代码修改一下吧。

// 获取元素
function getId(ids) {
	return document.getElementById(ids);
}
// 绑定事件
function getOnClick(getIds, color) {
	getIds.onclick = function () {
		getId("myDiv").style.backgroundColor = color;
	}
}
// 调用函数
getOnClick(getId("red"), "red");
getOnClick(getId("blue"), "blue");
getOnClick(getId("green"), "green");
getOnClick(getId("but04"), "white");

第三个JavaScript的版本，代码量减少，但需要一个个添加点击事件，仅供参考，仍然有需要优化的地方。

<body>
	<div id="content">
		<button type="button" onclick="setColor('red');">红色</button>
		<button type="button" onclick="setColor('blue');">蓝色</button>
		<button type="button" onclick="setColor('green');">绿色</button>
		<button type="button" onclick="setColor('#fff');">重置</button>
		<div class="side" id="myDiv">
			这里是显示背景的框
		</div>
	</div>
</body>
<script>
	// 第三个版本
	var myDiv = document.getElementById("myDiv");
	function setColor(color) {
		myDiv.style.backgroundColor = color;
	}
</script>

以上的版本需要思考的地方：如果需要触发更多的事件，一个个的调用还是非常麻烦的，需要我们可以试试用动态实现，将颜色存放在数组里。可以在评论上展示一下你们的见解，怎样实现更多按钮点击之后可以切换更多的颜色！

红颜不简

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
JavaScript多个按钮实现切换不同的颜色

以上的版本需要思考的地方：如果需要触发更多的事件，一个个的调用还是非常麻烦的，需要我们可以试试用动态实现，将颜色存放在数组里。可以在评论上展示一下你们的见解，怎样实现更多按钮点击之后可以切换更多的颜色！div样式的中的id需要调整一下，你们结合Script代码修改一下吧。展示一下它的div情况，css样式你们可以自行设计哈！仅供参考，依然有需要优化的地方，发挥你的想象去思考吧！，非常麻烦，但是实现起来相对比较容易。的知识点，整体还是比较好理解的。仅供参考，仍然有需要优化的地方。版本实现了、、优化，运用到。
复制链接

扫一扫