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

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

相关阅读:
测试PySpark
什么是物联网阀控水表？
vcruntime140_1.dll是什么？下载及修复方法分享
Ubuntu 启动时黑屏、显示 recovering journal，clean， xxx files，xxx blocks，只能从恢复模式启动
一探究竟：为什么需要 JVM？它处在什么位置？
MySQL进阶（数据库引擎）——MyISAM和InnoDB引擎的区别
访问限制符说明面向对象的封装性
23 种设计模式之工厂模式
Nvm，Nrm使用详解
wordpress 付费主题modown分享,可实现资源付费

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