html 隐藏广告代码,Javascript实现关闭广告实现删除广告的效果

Tea-pd

于 2022-07-05 08:30:00 发布

阅读量3.1k

点赞数 52

分类专栏： js学习文章标签： html css3 前端 css javascript

本文链接：https://blog.youkuaiyun.com/tea_tea_/article/details/125610479

版权

这篇博客详细介绍了如何利用HTML、CSS和JavaScript实现广告的隐藏与删除效果。首先，建立基础的HTML结构和CSS样式，接着通过JavaScript获取元素并添加CSS样式以实现广告隐藏。然后，编写点击事件，通过改变display属性使广告消失。最后，进行了优化，添加了额外的点击事件处理，以完善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先写基础的html样式

2.添加后面会用到的css样式

3.现在开始写script样式，我们先把需要获取到的元素获取到

1.先写基础的html样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
	</head>
	<body>
		<div id="div1">
			<div>告诉你件事。我是广告</div>
			<img src="./cha.png" alt="">
			<button>点我有惊喜</button>
			
		</div>
		
		
	
	</body>
</html>

2.添加后面会用到的css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.hover{
				width: 300px;
				height: 400px;
				background-color: red;
			}
			
			
			#div1{
				position: relative;
				
			}
			
			img{
				position: absolute;
				top: 10px;
				left: 260px;
			}
			
		</style>
	</head>
	<body>
		<div id="div1">
			<div>告诉你件事。我是广告</div>
			<img src="./cha.png" alt="">
			<button>点我有惊喜</button>
			
		</div>
		
	
	</body>
</html>

3.现在开始写script样式，我们先把需要获取到的元素获取到


		
		<script>
			var sex1 = document.querySelector('#div1 div')
			// console.log(sex1)
			var imgs = document.querySelector('img')
			var btn = document.querySelector(&#

最低0.47元/天解锁文章