欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2021年01月29日 10:29:12   作者：KaiSarH  
這篇文章主要為大家詳細介紹了JS實現(xiàn)關(guān)閉小廣告特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

知識點

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

運行效果

直接刪除

隱藏

代碼

<!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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 基于JavaScript實現(xiàn)頁面輪播圖漸變效果的示例代碼

    基于JavaScript實現(xiàn)頁面輪播圖漸變效果的示例代碼

    這篇文章主要給大家分享如何使用JavaScript實現(xiàn)一個頁面輪播圖漸變效果,輪播圖是網(wǎng)頁開發(fā)中常見的功能之一,它能夠展示多個圖片或內(nèi)容,并以一定的時間間隔進行自動切換,而通過添加漸變效果,可以讓切換過程更加平滑流暢,感興趣的小伙伴可以自己動手嘗試一下
    2023-10-10
  • js實現(xiàn)精確到秒的日期選擇器完整實例

    js實現(xiàn)精確到秒的日期選擇器完整實例

    這篇文章主要介紹了js實現(xiàn)精確到秒的日期選擇器,以完整實例形式分析了JavaScript日期選擇器的實現(xiàn)步驟與相關(guān)技巧,涉及JavaScript針對時間與日期的相關(guān)運算,需要的朋友可以參考下
    2016-04-04
  • 原生JS實現(xiàn)輪播圖效果

    原生JS實現(xiàn)輪播圖效果

    這篇文章主要為大家詳細介紹了原生JS實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-10-10
  • JS讀寫CSS樣式的方法匯總

    JS讀寫CSS樣式的方法匯總

    這篇文章主要為大家詳細匯總了JS讀寫CSS樣式的方法，內(nèi)容詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-08-08
  • JavaScript延時效果比較不錯的

    JavaScript延時效果比較不錯的

    JavaScript延時效果比較不錯的...
    2007-08-08
  • JavaScript模板引擎Template.js使用詳解

    JavaScript模板引擎Template.js使用詳解

    這篇文章主要為大家詳細介紹了JavaScript模板引擎Template.js使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法

    fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法

    這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法,分析了問題出現(xiàn)的原因及相關(guān)配置文件設(shè)置技巧,需要的朋友可以參考下
    2017-03-03
  • js實現(xiàn)每日簽到功能

    js實現(xiàn)每日簽到功能

    這篇文章主要為大家詳細介紹了js實現(xiàn)每日簽到功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-11-11
  • 詳解JavaScript中的作用域鏈與閉包

    詳解JavaScript中的作用域鏈與閉包

    這篇文章主要為大家詳細介紹一下JavaScript中的作用域鏈與閉包的使用，文中的示例代碼講解詳細，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
    2022-11-11
  • JavaScript常見數(shù)組方法之如何轉(zhuǎn)置矩陣

    JavaScript常見數(shù)組方法之如何轉(zhuǎn)置矩陣

    這篇文章主要給大家介紹了關(guān)于JavaScript常見數(shù)組方法之如何轉(zhuǎn)置矩陣的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2022-03-03

最新評論