DOM第一天作业-广告关闭--pink老师

 

HTML

 <div class="proda">
     <img src="images/ldh.jpg" alt="">
     <i class="close-btn">X</i>
</div>

CSS样式

   .proda {
        position: relative;
        width: 200px;
        height: 150px;
        margin: 20px auto;
    }

    .proda img {
        width: 100%;
        height: 100%;
    }

    .close-btn {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #fff;
    }

 JavaScript 代码

  <script>
        var proda = document.querySelector('.proda');
        var btn = document.querySelector('.close-btn');
        btn.onclick = function () {
            proda.style.display = 'none';
        }
  </script>