通过使用简单的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>

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

相关阅读:
游戏盾SDK是如何实现智能加速的？
【算法|双指针系列No.4】leetcode11. 盛最多水的容器
前端笔记01---html 的加载
【Rust 笔记】14-集合（下）
sqlite条件查询语句where
【AGC】构建服务3-认证服务示例
DirectX3D 正交投影学习记录
Spring Boot 中利用 ThreadPoolTaskExecutor 批量插入百万级数据实测！
公司某资料子系统定期cpu过高的诊断
竞速榜实时离线对数方案演进介绍

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