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

更新時間：2021年01月29日 10:29:12 作者：KaiSarH

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)關(guān)閉小廣告特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

知識點(diǎn)

1、獲取元素
2、通過元素獲取父元素
3、刪除節(jié)點(diǎn)
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. 接聽點(diǎn)擊
  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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

引入外部js腳本加載慢與頁面白屏問題的解決
最近做的一個項(xiàng)目需要引入一個外部的第三方j(luò)s腳本。發(fā)現(xiàn)加載比較慢，這篇文章主要介紹了引入外部js腳本加載慢與頁面白屏問題的解決，感興趣的小伙伴們可以參考一下
2018-12-12
基于JavaScript實(shí)現(xiàn)網(wǎng)頁版羊了個羊游戲
最近羊了個羊火的不得了，這篇文章主要為大家介紹了如何利用JS實(shí)現(xiàn)個網(wǎng)頁版羊了個羊游戲，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2022-09-09
JS去掉字符串中所有的逗號
這篇文章主要介紹了JS去掉字符串中所有的逗號,需要的朋友可以參考下
2017-10-10
JS設(shè)計(jì)模式之建造者模式的使用方法詳解
JS建造者模式是一種創(chuàng)建型設(shè)計(jì)模式,它可以用于構(gòu)建復(fù)雜對象的創(chuàng)建過程,將對象的構(gòu)建步驟和表示分離,以便能夠靈活地構(gòu)建不同的對象,本文將通過代碼示例給大家詳細(xì)的介紹一下JS建造者模式的用法,需要的朋友可以參考下
2023-08-08
JavaScript實(shí)現(xiàn)隱藏省略文字效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)隱藏省略文字效果的方法,涉及javascript基于事件響應(yīng)實(shí)現(xiàn)頁面字符串元素的獲取、截取、設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
Javascript編寫俄羅斯方塊思路及實(shí)例
本文主要給大家介紹的是使用javascript編寫俄羅斯方塊小游戲的思路和具體的實(shí)例代碼，有需要的小伙伴可以參考下
2015-07-07
JavaScript 實(shí)現(xiàn)自己的安卓手機(jī)自動化工具腳本(推薦)
這篇文章主要介紹了 JavaScript 實(shí)現(xiàn)自己的安卓手機(jī)自動化工具腳本,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-05-05
mpvue實(shí)現(xiàn)小程序簽到金幣掉落動畫(api實(shí)現(xiàn))
這篇文章主要介紹了mpvue實(shí)現(xiàn)小程序簽到金幣掉落動畫,這里使用小程序自帶的api來實(shí)現(xiàn)，文中通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2019-10-10
JavaScript實(shí)現(xiàn)多重繼承的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多重繼承的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)多重繼承的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
javascript上傳圖片前預(yù)覽圖片兼容大多數(shù)瀏覽器
上傳圖片前預(yù)覽圖片這種效果應(yīng)用比較廣泛，實(shí)現(xiàn)的方也大同小異，下面為大家介紹下，在javascript中是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下
2013-10-10