JS—按钮颜色切换

最新推荐文章于 2023-04-14 10:43:15 发布

spfLinux

最新推荐文章于 2023-04-14 10:43:15 发布

阅读量2.8k

点赞数 2

分类专栏： js 文章标签： javascript js 按钮颜色切换

本文链接：https://blog.csdn.net/spfLinux/article/details/78224030

版权

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn1" οnclick="btn(1)">按钮1</button>
	<button id="btn2" οnclick="btn(2)">按钮2</button>
	<button id="btn3" οnclick="btn(3)">按钮3</button>

	<script>
		//设置背景颜色
		//如果设置参数函数会节省函数数量吧
		//设置flag+参数函数
		flag = "btn1";
		function btn1(){
			document.getElementById("btn2").style.color = "black";
			document.getElementById("btn3").style.color = "black";
			document.getElementById("btn1").style.color = "red";
		}
		function btn2(){
			document.getElementById("btn1").style.color = "black";
			document.getElementById("btn2").style.color = "red";
			document.getElementById("btn3").style.color = "black";
		}
		function btn3(){
			document.getElementById("btn1").style.color = "black";
			document.getElementById("btn2").style.color = "black";
			document.getElementById("btn3").style.color = "red";
		}
		function btn(num){
			if(num == 1){
				document.getElementById(flag).style.color = "black";
				document.getElementById(flag).style.backgroundColor = "white";
				document.getElementById("btn1").style.color = "red";
				document.getElementById("btn1").style.backgroundColor = "blue";
				flag = "btn1";
			}
			if(num == 2){
				document.getElementById(flag).style.color = "black";
				document.getElementById(flag).style.backgroundColor = "white";
				document.getElementById("btn2").style.color = "red";
				document.getElementById("btn2").style.backgroundColor = "blue";
				flag = "btn2";
			}
			if(num == 3){
				document.getElementById(flag).style.color = "black";
				document.getElementById(flag).style.backgroundColor = "white";
				document.getElementById("btn3").style.color = "red";
				document.getElementById("btn3").style.backgroundColor = "blue";
				flag = "btn3";
			}
		}

	</script>
</body>
</html>

使用参数函数实现。（曾经在简书网站上看到过类似效果）

spfLinux

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
JS—按钮颜色切换

Document 按钮1 按钮2 按钮3 //设置背景颜色 //如果设置参数函数会节省函数数量吧 //设置flag+参数函数 flag = "btn1"; function btn1(){ document.getElementById("btn2").style.color = "black"; document.getElementById("b
复制链接

扫一扫