js小demo2（淘宝点击关闭二维码）

最新推荐文章于 2022-05-04 22:17:09 发布

-恰饭第一名-

最新推荐文章于 2022-05-04 22:17:09 发布

阅读量256

点赞数

分类专栏： JavaScript js小demo 学习笔记文章标签： js css html

本文链接：https://blog.csdn.net/weixin_46334272/article/details/114326477

版权

学习笔记同时被 3 个专栏收录

151 篇文章 8 订阅

订阅专栏

JavaScript

54 篇文章 8 订阅

订阅专栏

js小demo

5 篇文章 0 订阅

订阅专栏

核心思路：

1.利用样式的显示和隐藏完成, display:none 隐藏元素 display:block 显示元素

2.点击按钮，就让这个二维码盒子隐藏起来即可

当鼠标点击二维码关闭按钮的时候，则关闭整个二维码

   <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            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: -16px;
            width: 14px;
            height: 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/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>

-恰饭第一名-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
js小demo2（淘宝点击关闭二维码）

核心思路： 1.利用样式的显示和隐藏完成, display:none 隐藏元素 display:block 显示元素 2.点击按钮，就让这个二维码盒子隐藏起来即可当鼠标点击二维码关闭按钮的时候，则关闭整个二维码 <style> .box { position: relative; width: 74px; height: 88px; border: 1px solid
复制链接

扫一扫