如何用css只做一个div鼠标点击变色

最新推荐文章于 2024-05-21 18:29:50 发布

anonym_new

最新推荐文章于 2024-05-21 18:29:50 发布

阅读量1.5w

点赞数 2

本文链接：https://blog.csdn.net/anonym_new/article/details/90738883

版权

先写一个html文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>改变颜色</title>
	<link rel="stylesheet" href="css/test.css"></link>
	<script>
		window.onload=function(){
			var div =document.getElementsByTagName("div")[0];
			div.onclick=function(){
				var old=this.className;
				if(old=="a"){
					this.className="b";
				}else{
					this.className="a";
				}
			}
		}
	</script>
</head>
<body>
	<div class="a"></div>
</body>
</html>

直接改变div的名字，当鼠标点击的时候直接替换，当开始为a时，改变为b，为b时变为a，就可以两种颜色切换。

.a{
background-color: salmon;
width: 100px;
height: 100px;
}
.b{
background-color:#111111;
width: 100px;
height: 100px;
}

这个是div的大小和颜色

anonym_new

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
如何用css只做一个div鼠标点击变色

先写一个html文件<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>改变颜色</title> <link rel="stylesheet" href="css/test.css"></link> <script&gt...
复制链接

扫一扫