<!-- 仿淘宝关闭二维码案例 -->
<!-- 核心思路:利用样式的显示和隐藏完成,display:none隐藏元素;display:block显示元素。 -->
<!-- 点击按钮,就让这个二维码盒子隐藏起来即可。 -->
<head>
<style>
.box{
width:70px;
height:83px;
border:1px solid #ccc ;
position: relative;
margin:100px auto;
font-size: 12px;
text-align: center;
color: #f40;
display: block;
}
.box img{
width:60px;
margin-top:5px;
}
.close-btn{
position: absolute;/*子绝父相*/
top:-1px;/*距离盒子上部的距离*/
left:-18px;
height:14px;
width: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;/* 当鼠标点击到时,会显示一只手的形状。*/
}
</style>
</head>
<body>
<div class="box">
淘宝二维码
<img src="images/erweima.png" alt="">
<i class = "close-btn">x</i>
<script>
var close_btn = document.getElementsByClassName('close-btn');
console.log(close_btn)
var box = document.getElementsByClassName('box');
close_btn[0].onclick = function(){
box[0].style.display = 'none';
}
</script>
</div>
</body>
03-21
3324
09-12