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

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('button')
			
		</script>

4.然后通过js添加一些css样式


 
		
		<script>
			var sex1 = document.querySelector('#div1 div')
			// console.log(sex1)
			var imgs = document.querySelector('img')
			var btn = document.querySelector('button')
				sex1.className = 'hover'
				sex1.style.textAlign = 'center';
				sex1.style.lineHeight = '400px'
				btn.style.display = 'none';
		
		</script>

5.现在我们写点击事件


	<script>
			var sex1 = document.querySelector('#div1 div')
			// console.log(sex1)
			var imgs = document.querySelector('img')
			var btn = document.querySelector('button')
				sex1.className = 'hover'
				sex1.style.textAlign = 'center';
				sex1.style.lineHeight = '400px'
				btn.style.display = 'none';
				
				// console.log(sex1)
				imgs.onclick = function(){
					sex1.style.display = 'none';
					this.style.display = 'none';
					alert('拜了个拜');
					btn.style.display = 'block';
					
				}
				
				
			
		</script>

这里通过点击事件将sex1.style.display = 'none';和this.style.display = 'none';属性设置好

6.我们现在优化一下，再加一个点击事件


 
		<script>
			var sex1 = document.querySelector('#div1 div')
			// console.log(sex1)
			var imgs = document.querySelector('img')
			var btn = document.querySelector('button')
				sex1.className = 'hover'
				sex1.style.textAlign = 'center';
				sex1.style.lineHeight = '400px'
				btn.style.display = 'none';
				
				// console.log(sex1)
				imgs.onclick = function(){
					sex1.style.display = 'none';
					this.style.display = 'none';
					alert('拜了个拜');
					btn.style.display = 'block';
					
				}
				
				
				btn.onclick = function(){
					sex1.style.display = 'block';
					imgs.style.display = 'block';
					btn.style.display = 'none';
					alert('我又回来了');
				
				}
		</script>

7.最终样式


<!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>
		
		
		<script>
			var sex1 = document.querySelector('#div1 div')
			// console.log(sex1)
			var imgs = document.querySelector('img')
			var btn = document.querySelector('button')
				sex1.className = 'hover'
				sex1.style.textAlign = 'center';
				sex1.style.lineHeight = '400px'
				btn.style.display = 'none';
				
				// console.log(sex1)
				imgs.onclick = function(){
					sex1.style.display = 'none';
					this.style.display = 'none';
					alert('拜了个拜');
					btn.style.display = 'block';
					
				}
				
				
				btn.onclick = function(){
					sex1.style.display = 'block';
					imgs.style.display = 'block';
					btn.style.display = 'none';
					alert('我又回来了');
				
				}
		</script>
	</body>
</html>

相关阅读:
【Web开发 | Django】数据库分流之道：探索Django多数据库路由最佳实践
微软出品，166页深度解读，多模态GPT-4V
Go | 闭包的使用
枚举类 typede fmalloc 函数 free 函数位运算
这才叫高并发，阿里架构师手写的三份绝密百亿级架构笔记限时分享
代码随想录算法训练营第五十天|股票问题专题(2)
pbootcms 后台内容列表搜索功能扩展及增加显示字段功能
论文超详细精读|五千字：ResGCN/DenseGCN
欧几里得算法证明，最小公倍数求法证明
spring启动流程(二）：包的扫描流程

原文地址：https://blog.csdn.net/tea_tea_/article/details/125610479