js实现点击切换背景颜色

最新推荐文章于 2024-08-05 04:49:43 发布

聂小邯

最新推荐文章于 2024-08-05 04:49:43 发布

阅读量1.6w

点赞数 6

分类专栏： js的使用

本文链接：https://blog.csdn.net/weixin_45069992/article/details/90727077

版权

js的使用专栏收录该内容

13 篇文章 2 订阅

订阅专栏

方法一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#col{
				width: 300px;
				height: 100px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<button onclick="getCol('blue')">蓝色</button>
		<button onclick="getCol('red')">红色</button>
		<button onclick="getCol('#ff6699')">紫色</button>
		<div id="col"></div>
		
		<script>
			
			function getCol(cole) {
				document.getElementById("col").style.background = cole;
			}
			
		</script>
	</body>
</html>

方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#col{
				width: 300px;
				height: 100px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<button id="on1">蓝色</button>
		<button id="on2">红色</button>
		<button id="on3">紫色</button>

		<div id="col"></div>
		<script>
			//获取元素
			function getId(ids) {
				return document.getElementById(ids);
			}
			//绑定事件
			function getOn(getid,color) {
				getid.onclick = function() {
					getId("col").style.background = color;
				}	
			}
			//调用函数
			getOn(getId('on1'),"blue");
			getOn(getId('on2'), "red");
			getOn(getId('on3'), "#ff6699");

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