点击X可关闭二维码（html事件处理）

最新推荐文章于 2022-04-25 19:59:46 发布

L在前方

最新推荐文章于 2022-04-25 19:59:46 发布

阅读量416

点赞数

分类专栏：前端（Html+CSS+JavaScript）文章标签： html

本文链接：https://blog.csdn.net/qq_45828598/article/details/111601959

版权

前端（Html+CSS+JavaScript）专栏收录该内容

14 篇文章 0 订阅

订阅专栏

点击X可以关闭整个div标签

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:200px;
				height:300px;
				border: 1px solid #000;
				position: relative;
			}
			div>img{
				width:100%;
			}
			div>span{
				position: absolute;
				right:-10px;
				top:0px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/erweima.png" alt="" /><span id="close">X</span>
		</div>
		<script>
			var close = document.getElementById("close");
			var box = document.getElementById("box");
			close.onclick=function(){
//				div关闭   隐藏  display
				box.style.display = "none";
			}
		</script>
	</body>
</html>