JS中实现删除广告

在网页中经常会出现广告,如下图1,点击×就可以实现将广告给删除,如图2
在这里插入图片描述

在这里插入图片描述

此问题有多种解法,此处将在JS中实现此操作

 1. 删除操作在×这个图片上实现的,所以在×这个地方安插点击事件
 2. 当点击×之后当前的广告就会消失,则广告这个盒子的display为none,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .a{
            height: 200px;
            width: 190px;
        }
        .small{
            background-image: url(wrong.jpg);
            width: 15px;
            height: 15px;
            background-repeat: no-repeat;
            float: left;
        }
        .big{
            background-image: url(tb.jpg);
            width: 175px;
            height: 175px;
            background-repeat: no-repeat;
            float: right;
            display: table;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="small"></div>
        <div class="big"></div>
    </div>
    <script>
        var s=document.querySelector('.small');
        var b=document.querySelector('.big');
        var a=document.querySelector('.a');
        s.onclick=function(){
            this.style.display='none';
            b.style.display='none';
        }
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_46535360/article/details/108431119