js淘宝点击关闭二维码案例

最新推荐文章于 2023-07-07 17:21:02 发布

奶盖不加糖

最新推荐文章于 2023-07-07 17:21:02 发布

阅读量1k

点赞数 3

文章标签： javascript css js html

本文链接：https://blog.csdn.net/qq_44156869/article/details/109698275

版权

WebAPIs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

案例：淘宝点击关闭二维码

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

案例分析：

核心思路：利用样式的显示和隐藏完成，display:none 隐藏元素 display：block显示元素
点击按钮，就让这个二维码盒子隐藏起来即可。

例子：

<head>
   
    <style>
      .box {
          position: relative;
          width:74px;
          height: 88px;
          border: 1px;
          margin: 100px;
          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;
          widows: 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">x</i>
    </div>
    
    <script>
        //1.获取元素
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        //2.注册事件
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>
</body>