案例:js实现关闭淘宝二维码

最新推荐文章于 2023-04-02 13:47:28 发布

庚中

最新推荐文章于 2023-04-02 13:47:28 发布

阅读量1.9k

点赞数 4

分类专栏：三.JavaScript

本文链接：https://blog.csdn.net/xiaodi520520/article/details/82950668

版权

三.JavaScript 专栏收录该内容

59 篇文章 2 订阅

订阅专栏

案例:js实现关闭淘宝二维码

先看效果演示:
点击左上方的X可以关闭二维码

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>