防淘宝关闭二维码案例

在这里插入图片描述

代码展示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container {
      
      
				/* background-color: red; */
				height: 115px;
				width: 180px;
				margin: 100px auto;
				position: relative;
				text-align: center;
				/* overflow: hidden; */
			}

			.close-btn {
      
      
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="box">
				<span>淘宝二维码</span>
				<img src="./img/4.jpg" width="150">
				<i class="close-btn">x</i>
			</div>
		</div>
		<script>
			var i = document.querySelector('.close-btn'); //获取元素对象
			var cont = document.querySelector('#container')  //获取大盒子对象
			//注册事件 事件处理函数
			i.onclick = function() {
      
      
				cont.style.display="none";
			}
		</script>
	</body>
</html>

效果如下:
在这里插入图片描述

おすすめ

転載: blog.csdn.net/qq_45308912/article/details/121239555