本文是新手教程，通过JavaScript实现点击图片后背景图片更替。步骤包括创建HTML文件，插入图片，获取图片，使用for循环添加点击事件，获取点击图片路径，设置格式，并提供完整代码。
前言：本人是新生小白，JavaScript学的很菜，如有错误之处欢迎指出。
目录
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>小提示：记得提前给图片设置好大小，防止图片大小不一出现布局难看。
扫一扫
3269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
