页面背景替换
效果演示
点击查看操作效果
案例分析
- 练习给一组元素注册事件
- 给四个图片利用循环注册事件
- 点击那个图片，页面背景替换为那个图片
- 核心算法：把当前图片的src路径取过来，给body作为背景即可
代码实现
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(img/bj1.jpg) no-repeat;
background-size: 100%;
}
li {
list-style: none;
}
.bj {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.bj li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.bj img {
width: 100px;
}
</style>
</head>
<body>
<ul class="bj">
<li>
<img src="img/bj1.jpg" alt="">
</li>
<li><img src="img/bj2.jpg" alt=""></li>
<li><img src="img/bj3.jpg" alt=""></li>
<li><img src="img/bj4.jpg" alt=""></li>
</ul>
<script>
//1.获取元素
var imgs = document.querySelector('.bj').querySelectorAll('img');
//2.循环注册事件
for (var i = 0; i < imgs.length; i ) {
imgs[i].onclick = function() {
//this.src就是我们点击图片的路径
//把这个路径给我们body的背景图路径
document.body.style.backgroundImage = 'url(' this.src ')';
}
}
</script>
</body>
</html>
