JS中实现删除广告

时间:2020-9-8 作者:admin


在网页中经常会出现广告,如下图1,点击×就可以实现将广告给删除,如图2
JS中实现删除广告

JS中实现删除广告

此问题有多种解法,此处将在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>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。