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

    目录

     

            1.先写基础的html样式

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

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

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

            5.现在我们写点击事件

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

            7.最终样式

     

    1.先写基础的html样式

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	
    7. 	</head>
    8. 	<body>
    9. 		<div id="div1">
    10. 			<div>告诉你件事。我是广告</div>
    11. 			<img src="./cha.png" alt="">
    12. 			<button>点我有惊喜</button>
    13. 			
    14. 		</div>
    15. 		
    16. 		
    17. 	
    18. 	</body>
    19. </html>

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

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<style>
    7. 			.hover{
    8. 				width: 300px;
    9. 				height: 400px;
    10. 				background-color: red;
    11. 			}
    12. 			
    13. 			
    14. 			#div1{
    15. 				position: relative;
    16. 				
    17. 			}
    18. 			
    19. 			img{
    20. 				position: absolute;
    21. 				top: 10px;
    22. 				left: 260px;
    23. 			}
    24. 			
    25. 		</style>
    26. 	</head>
    27. 	<body>
    28. 		<div id="div1">
    29. 			<div>告诉你件事。我是广告</div>
    30. 			<img src="./cha.png" alt="">
    31. 			<button>点我有惊喜</button>
    32. 			
    33. 		</div>
    34. 		
    35. 	
    36. 	</body>
    37. </html>

     

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

    1.  
    2. 		
    3. 		<script>
    4. 			var sex1 = document.querySelector('#div1 div')
    5. 			// console.log(sex1)
    6. 			var imgs = document.querySelector('img')
    7. 			var btn = document.querySelector('button')
    8. 			
    9. 		</script>

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

    1.  
    2. 		
    3. 		<script>
    4. 			var sex1 = document.querySelector('#div1 div')
    5. 			// console.log(sex1)
    6. 			var imgs = document.querySelector('img')
    7. 			var btn = document.querySelector('button')
    8. 				sex1.className = 'hover'
    9. 				sex1.style.textAlign = 'center';
    10. 				sex1.style.lineHeight = '400px'
    11. 				btn.style.display = 'none';
    12. 		
    13. 		</script>

    5.现在我们写点击事件

    1. 	<script>
    2. 			var sex1 = document.querySelector('#div1 div')
    3. 			// console.log(sex1)
    4. 			var imgs = document.querySelector('img')
    5. 			var btn = document.querySelector('button')
    6. 				sex1.className = 'hover'
    7. 				sex1.style.textAlign = 'center';
    8. 				sex1.style.lineHeight = '400px'
    9. 				btn.style.display = 'none';
    10. 				
    11. 				// console.log(sex1)
    12. 				imgs.onclick = function(){
    13. 					sex1.style.display = 'none';
    14. 					this.style.display = 'none';
    15. 					alert('拜了个拜');
    16. 					btn.style.display = 'block';
    17. 					
    18. 				}
    19. 				
    20. 				
    21. 			
    22. 		</script>

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

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

    1.  
    2. 		<script>
    3. 			var sex1 = document.querySelector('#div1 div')
    4. 			// console.log(sex1)
    5. 			var imgs = document.querySelector('img')
    6. 			var btn = document.querySelector('button')
    7. 				sex1.className = 'hover'
    8. 				sex1.style.textAlign = 'center';
    9. 				sex1.style.lineHeight = '400px'
    10. 				btn.style.display = 'none';
    11. 				
    12. 				// console.log(sex1)
    13. 				imgs.onclick = function(){
    14. 					sex1.style.display = 'none';
    15. 					this.style.display = 'none';
    16. 					alert('拜了个拜');
    17. 					btn.style.display = 'block';
    18. 					
    19. 				}
    20. 				
    21. 				
    22. 				btn.onclick = function(){
    23. 					sex1.style.display = 'block';
    24. 					imgs.style.display = 'block';
    25. 					btn.style.display = 'none';
    26. 					alert('我又回来了');
    27. 				
    28. 				}
    29. 		</script>

    7.最终样式

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<style>
    7. 			.hover{
    8. 				width: 300px;
    9. 				height: 400px;
    10. 				background-color: red;
    11. 			}
    12. 			
    13. 			
    14. 			#div1{
    15. 				position: relative;
    16. 				
    17. 			}
    18. 			
    19. 			img{
    20. 				position: absolute;
    21. 				top: 10px;
    22. 				left: 260px;
    23. 			}
    24. 			
    25. 		</style>
    26. 	</head>
    27. 	<body>
    28. 		<div id="div1">
    29. 			<div>告诉你件事。我是广告</div>
    30. 			<img src="./cha.png" alt="">
    31. 			<button>点我有惊喜</button>
    32. 			
    33. 		</div>
    34. 		
    35. 		
    36. 		<script>
    37. 			var sex1 = document.querySelector('#div1 div')
    38. 			// console.log(sex1)
    39. 			var imgs = document.querySelector('img')
    40. 			var btn = document.querySelector('button')
    41. 				sex1.className = 'hover'
    42. 				sex1.style.textAlign = 'center';
    43. 				sex1.style.lineHeight = '400px'
    44. 				btn.style.display = 'none';
    45. 				
    46. 				// console.log(sex1)
    47. 				imgs.onclick = function(){
    48. 					sex1.style.display = 'none';
    49. 					this.style.display = 'none';
    50. 					alert('拜了个拜');
    51. 					btn.style.display = 'block';
    52. 					
    53. 				}
    54. 				
    55. 				
    56. 				btn.onclick = function(){
    57. 					sex1.style.display = 'block';
    58. 					imgs.style.display = 'block';
    59. 					btn.style.display = 'none';
    60. 					alert('我又回来了');
    61. 				
    62. 				}
    63. 		</script>
    64. 	</body>
    65. </html>

  • 相关阅读:
    毫末AI DAY的智驾弹药：上有「世界模型」，下有3000元方案
    圆通快递订单创建接口asp版,面单打印接口asp版,asp圆通快递物流轨迹查询接口
    Python笔记3-正则表达式
    关系数据库事务中的对象锁定
    JavaWeb[总结]
    优雅而高效的JavaScript——高阶函数
    Go 1.19 工具链升级：go命令与工具改进详解
    Docker目录映射
    ＜shell＞《Shell脚本-极简实用手册（高级）》 （自用、持续更新）
    若依微服务特殊字符串被过滤的解决办法
  • 原文地址：https://blog.csdn.net/tea_tea_/article/details/125610479