js实战案例--点击关闭二维码

最新推荐文章于 2023-11-18 22:58:50 发布

某不知名代码搬运工

最新推荐文章于 2023-11-18 22:58:50 发布

阅读量836

点赞数

文章标签：人工智能物联网前端 js

本文链接：https://blog.csdn.net/m0_50357382/article/details/123826071

版权

js实战案例–点击关闭二维码

要求：当鼠标点击二维码关闭按钮时，则关闭整个二维码

如👇图

某不知名代码搬运工

思路：

利用样式的显示（display:block）和隐藏（display:none）完成。
点击按钮，隐藏二维码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        position: relative;
        width: 74px;
        height: 88px;
        border: 1px solid #ccc;/*solid: 定义实线边框*/
        margin: 100px auto;
        font-size: 12px;
        text-align: center;
        color: #f40;
            /* display: block; */
    }
    .box img{
        width: 90px;
        margin-top: 5px;
    }
    .atn {
        position: absolute;
        top: -1px;
        left: -16px;
        width: 14px;
        height: 14px;
        border: 1px solid #ccc;
        line-height: 14px; /*设置行间的距离（行高）*/
        cursor: pointer;/*cursor：pointer设定鼠标的形状为一只伸出食指的手，这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式*/
        }
</style>

<body>
    <div class="box">
        二维码
        <img src="images/tao.png" alt="">
        <i class="atn">x</i>
    </div>
    <script>
        var atn = document.querySelector('.atn');
        var box = document.querySelector('.box');//类名要加.
        atn.onclick = function(){
            box.style.display = 'none';
        }
    </script>
</body>
</html>

某不知名代码搬运工

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实战案例--点击关闭二维码

js实战案例–点击关闭二维码要求：当鼠标点击二维码关闭按钮时，则关闭整个二维码如👇图思路：利用样式的显示（display:block）和隐藏（display:none）完成。点击按钮，隐藏二维码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
复制链接

扫一扫