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

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

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

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

知識(shí)點(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)文章

基于JavaScript實(shí)現(xiàn)頁面輪播圖漸變效果的示例代碼
這篇文章主要給大家分享如何使用JavaScript實(shí)現(xiàn)一個(gè)頁面輪播圖漸變效果,輪播圖是網(wǎng)頁開發(fā)中常見的功能之一,它能夠展示多個(gè)圖片或內(nèi)容,并以一定的時(shí)間間隔進(jìn)行自動(dòng)切換,而通過添加漸變效果,可以讓切換過程更加平滑流暢,感興趣的小伙伴可以自己動(dòng)手嘗試一下
2023-10-10
js實(shí)現(xiàn)精確到秒的日期選擇器完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)精確到秒的日期選擇器,以完整實(shí)例形式分析了JavaScript日期選擇器的實(shí)現(xiàn)步驟與相關(guān)技巧,涉及JavaScript針對時(shí)間與日期的相關(guān)運(yùn)算,需要的朋友可以參考下
2016-04-04
原生JS實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
JS讀寫CSS樣式的方法匯總
這篇文章主要為大家詳細(xì)匯總了JS讀寫CSS樣式的方法，內(nèi)容詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
JavaScript延時(shí)效果比較不錯(cuò)的
JavaScript延時(shí)效果比較不錯(cuò)的...
2007-08-08
JavaScript模板引擎Template.js使用詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript模板引擎Template.js使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法
這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法,分析了問題出現(xiàn)的原因及相關(guān)配置文件設(shè)置技巧,需要的朋友可以參考下
2017-03-03
js實(shí)現(xiàn)每日簽到功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)每日簽到功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
詳解JavaScript中的作用域鏈與閉包
這篇文章主要為大家詳細(xì)介紹一下JavaScript中的作用域鏈與閉包的使用，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
2022-11-11
JavaScript常見數(shù)組方法之如何轉(zhuǎn)置矩陣
這篇文章主要給大家介紹了關(guān)于JavaScript常見數(shù)組方法之如何轉(zhuǎn)置矩陣的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-03-03