案例:js实现关闭淘宝二维码
先看效果演示:
js实现过程:
第1步.获取页面元素
var x = document.getElementById('x');//id比较好用,因为id具有唯一性
// var box = document.getElementsByClassName('box')[0];或者用类名去获取也可以
第2步.声明一个注册事件
x.onclick = function(){
}
第3步.在第二步里面添加事件处理
//3.事件处理
// box.style.display = 'none';或者用类名去获取让display=none也可以
this.parentNode.style.display = 'none';
完整的代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>关闭二维码</title>
<style>
.box {
border: 1px solid #D9D9D9;
margin: 100px auto;
position: relative;
width: 107px;
}
#x {
border: 1px solid #D9D9D9;
width: 14px;
height: 14px;
line-height: 14px;
color: #D6D6D6;
cursor: pointer;
position: absolute;
top: 0;
left: -15px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/taobao.jpg" alt=""/>
<span id="x">×</span>
</div>
</body>
<script>
//1.获取页面元素
var x = document.getElementById('x');
// var box = document.getElementsByClassName('box')[0];
//2.注册事件
x.onclick = function(){
//3.事件处理
// box.style.display = 'none';
this.parentNode.style.display = 'none';
}
</script>
</html>