通过使用简单的JavaScript的效果实现点击图片背景图片更换的效果

前言：本人是新生小白，JavaScript学的很菜，如有错误之处欢迎指出。

1.首先我们先创建一个html文件

2.然后插入3张图片

3.接下来给图片获取到

4.通过for循环给图片添加点击事件

5.接下来我们通过点击事件获取到点击图片的路径

6.设置格式

7.最终代码

1.首先我们先创建一个html文件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

2.然后插入3张图片


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 150px;
				height: 150px;
			}
			
			body{
				background-image: url(img/1.png);
				background-size: cover;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
			<img src="./img/1.png" alt="">
			<img src="./img/2.png" alt="">
			<img src="./img/3.png" alt="">
			
 
	</body>
</html>

3.接下来给图片获取到


 
			
			
		<script>
				var imgs = document.querySelectorAll('img')
				
					
		</script>

4.通过for循环给图片添加点击事件


 
			
			
			
			
			
			
			
			
			<script>
				var imgs = document.querySelectorAll('img')
				
					for(var i=0;i<imgs.length;i++){
						imgs[i].onclick = function(){
								
						}
					}
			</script>

5.接下来我们通过点击事件获取到点击图片的路径


 
			
			
			
			<script>
				var imgs = document.querySelectorAll('img')
				
					for(var i=0;i<imgs.length;i++){
						imgs[i].onclick = function(){
								var src = this.src
							
								
						}
					}
			</script>

6.设置格式


	
			
			
			<script>
				var imgs = document.querySelectorAll('img')
				
					for(var i=0;i<imgs.length;i++){
						imgs[i].onclick = function(){
								var src = this.src
								// console.log(src)
								document.body.style.backgroundImage = 'url('+src + ')'
						}
					}
			</script>

7.最终代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 150px;
				height: 150px;
			}
			
			body{
				background-image: url(img/1.png);
				background-size: cover;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
			<img src="./img/1.png" alt="">
			<img src="./img/2.png" alt="">
			<img src="./img/3.png" alt="">
		
	
			<script>
				var imgs = document.querySelectorAll('img')
				
					for(var i=0;i<imgs.length;i++){
						imgs[i].onclick = function(){
								var src = this.src
								// console.log(src)
								document.body.style.backgroundImage = 'url('+src + ')'
						}
					}
			</script>
	</body>
</html>

小提示：记得提前给图片设置好大小，防止图片大小不一出现布局难看。

相关阅读:
数理统计笔记5：参数估计-区间估计
docker打包并且推送到远端服务器
计算机网络第一章习题_网络概述
python爬虫之beautiful soup的使用
python向microPython的repl发送串口命令驱动ws2812（附避坑指南）
React报错之Type ‘() =＞ JSX.Element[]‘ is not assignable to type FunctionComponent
vue项目适配屏幕分辨率与屏幕的缩放适配详细教程
【前端攻城师之JS基础】04原型对象
基于Win11、CentOS7、VMWare15pro搭建Hadoop2.7.7
4D 语义分割——SpSequenceNet

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