JS實現(xiàn)關閉小廣告特效
更新時間：2021年01月29日 10:29:12 作者：KaiSarH
這篇文章主要為大家詳細介紹了JS實現(xiàn)關閉小廣告特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)關閉小廣告特效的具體代碼，供大家參考，具體內(nèi)容如下
知識點
1、獲取元素
2、通過元素獲取父元素
3、刪除節(jié)點
4、設置元素隱藏
運行效果
直接刪除
隱藏
代碼
<!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. 獲取關閉標簽
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于JavaScript實現(xiàn)頁面輪播圖漸變效果的示例代碼
這篇文章主要給大家分享如何使用JavaScript實現(xiàn)一個頁面輪播圖漸變效果,輪播圖是網(wǎng)頁開發(fā)中常見的功能之一,它能夠展示多個圖片或內(nèi)容,并以一定的時間間隔進行自動切換,而通過添加漸變效果,可以讓切換過程更加平滑流暢,感興趣的小伙伴可以自己動手嘗試一下2023-10-10
這篇文章主要介紹了js實現(xiàn)精確到秒的日期選擇器,以完整實例形式分析了JavaScript日期選擇器的實現(xiàn)步驟與相關技巧,涉及JavaScript針對時間與日期的相關運算,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要為大家詳細匯總了JS讀寫CSS樣式的方法，內(nèi)容詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript延時效果比較不錯的...2007-08-08
這篇文章主要為大家詳細介紹了JavaScript模板引擎Template.js使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法
這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法,分析了問題出現(xiàn)的原因及相關配置文件設置技巧,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)每日簽到功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要為大家詳細介紹一下JavaScript中的作用域鏈與閉包的使用，文中的示例代碼講解詳細，對我們學習JavaScript有一定的幫助，需要的可以參考一下2022-11-11
這篇文章主要給大家介紹了關于JavaScript常見數(shù)組方法之如何轉置矩陣的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03