JS实现点击按钮关闭某个盒子

最新推荐文章于 2022-10-28 16:09:27 发布

牟童

最新推荐文章于 2022-10-28 16:09:27 发布

阅读量4.8k

点赞数 3

本文链接：https://blog.csdn.net/c9316/article/details/81390891

版权

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>just a practice</title>
	<style type="text/css" media="screen">
		*{
			padding: 0;
			margin:0;
		}
		.top-banner{
			background-color: pink;
            height: 80px;
		}	
		.w{
			width: 1210px;
			height: 80px;
			margin:0 auto;
			background-color: blue;
			position:relative;
		}	
		a{
			display: inline-block;
			width: 20px;
			height: 20px;
			font:700 14px/20px "simsum";
			text-align: center;
			text-decoration: none;
			color:#fff;
			background-color: #000;
			position: absolute;
			top:10px;
			right:10px;
		}
		.hide{
			display: none!important;
		}
	</style>
</head>
<body>

	<div class="top-banner">
		<div class="w" id="topBanner">
			<img src="" alt="">
			<a href="#" id="close">×</a>
		</div>
	</div>
<script>
	//点击a链接 关闭top-banner盒子
	var close=document.getElementById("close");
	var topbanner=document.getElementById("topbanner");
	close.onclick=function fff(){
		topBanner.className="hide";

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

效果就是：