本文通过JavaScript示例演示如何关闭网页小广告。核心知识点包括获取元素、定位父元素以及执行删除或隐藏操作。代码展示了两种实现方式：直接调用remove()方法移除节点，或通过设置style.display='none'隐藏元素。文章提供完整HTML与JS代码供参考学习。
JavaScript实现关闭小广告特效：删除与隐藏节点详解
本文分享了一段使用JavaScript实现关闭小广告特效的具体代码，供读者参考学习。
实现该功能涉及以下核心知识点：
1、获取页面元素；2、通过当前元素定位其父元素；3、执行节点删除操作；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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。