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