JS實現(xiàn)關(guān)閉小廣告特效

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

本文實例為大家分享了JS實現(xiàn)關(guān)閉小廣告特效的具體代碼，供大家參考，具體內(nèi)容如下

知識點

1、獲取元素
2、通過元素獲取父元素
3、刪除節(jié)點
4、設(shè)置元素隱藏

運(yùn)行效果

直接刪除

隱藏

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box{
      height: 200px;
      width: 200px;
      position: relative;
      display: inline-block;
    }
    #box>#icon{
      height: 100%;
      width: 100%;
    }
    div>img:nth-child(2){
      height: 30px;
      width: 30px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="box">
  <img id="icon" src="images/阿魯20.gif" alt="">
  <img id="close" src="images/刪除.png" alt="">
</div>
<script>
  window.onload = function (ev) {
    // 1. 獲取關(guān)閉標(biāo)簽
    var close = document.querySelector('#close');
    // 2. 接聽點擊
    close.onclick = function (ev1) {
      // 直接刪除
      // this.parentElement.remove();
      // this.parentNode.remove();
      //隱藏
      this.parentElement.style.display = 'none';
      // this.parentElement.setAttribute('style','display:none');
    }
  }
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：webpack打包html里面img后src為“[object Module]”問題

欄目：JavaScript

下一篇：springmvc json類型轉(zhuǎn)換錯誤解決方案

本文標(biāo)題：JS實現(xiàn)關(guān)閉小廣告特效

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9419.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

JS實現(xiàn)關(guān)閉小廣告特效

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀