思路:利用样式的显示和隐藏完成,要分清事件三要素分别是什么。
事件源:大盒子旁边的小叉号
注册事件和事件处理程序:点击按钮,让大盒子隐藏
display:none 隐藏元素
display:block 显示元素
big.style.display = "none" 此处的big不能使用this(因为this指向的是事件的调用者)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#big {
width: 200px;
height: 200px;
position: relative;
color: pink;
margin: 50px auto;
border: 1px solid #ccc;
}
#div2 {
width: 30px;
height: 30px;
position: absolute;
left: -31px;
top: 1px;
border: 1px solid #ccc;
}
#div2 span {
display: block;
font-size: 10px;
text-align: center;
line-height: 30px;
color: orangered;
}
p {
text-align: center;
color: orangered;
}
img {
width: 180px;
height: 150px;
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="big">
<div id="div1">
<p>淘宝二维码</p>
<img src="./img/淘宝二维码.png" alt="" />
</div>
<div id="div2"><span>X</span></div>
</div>
<script>
var div2 = document.getElementById("div2");
var big = document.getElementById("big");
div2.onclick = function() {
big.style.display = "none";
};
</script>
</body>
</html>