原生js实现关闭tb小广告

最新推荐文章于 2023-05-04 21:59:36 发布

想做一只快乐的修狗

最新推荐文章于 2023-05-04 21:59:36 发布

阅读量227

点赞数 2

文章标签： javascript 前端 html dom

本文链接：https://blog.csdn.net/weixin_44109827/article/details/123155294

版权

目录结构：

代码：

<!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>关闭小广告</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #qe_code {
            width: 180px;
            height: 160px;
            position: relative;
            /* 居中显示 */
            margin: 15px auto;
        }
        #qe_code img{
            position: absolute;
            /* 靠右 */
            right: 0;
        }
        #qe_code #close {
            position: absolute;
            width: 18px;
            height: 18px;
            /* 水平垂直居中 */
            text-align: center;
            line-height: 18px;
            cursor: pointer;
            border: 1px solid #e0e0e0;
            color: #666;
        }
    </style>
</head>
<body>
    <div id="qe_code">
        <img src="./images/tb.png">
        <span id="close">X</span>
    </div>
    <script>
        var closeSpan = document.getElementById("close");
        var qe_code = document.getElementById("qe_code");
        closeSpan.onclick = function() {
            // 点击span，让整个div盒子消失
            qe_code.style.display = "none";
        }
    </script>
</body>
</html>

效果：

想做一只快乐的修狗

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js实现关闭tb小广告

目录结构：代码：<!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"> .
复制链接

扫一扫