实现功能 点击图片改变背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(diqiu.jpg) no-repeat center top;
background-size: 100%;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="diqiu.jpg" alt=""></li>
<li><img src="hai.jpg" alt=""></li>
<li><img src="sunset.jpg" alt=""></li>
<li><img src="yu.jpg" alt=""></li>
</ul>
<script>
//1.获取元素
// var body = document.querySelector(body);
// var imgs = document.querySelector('.baidu').querySelectorAll('img');
var imgs = document.querySelectorAll('img');
// 2.循环注册事件
for(var i = 0 ; i < imgs.length ; i++){
imgs[i].onclick = function(){
//this.src 就是我们点击图片的路径 imges/2.jpg
//把这个路径this.src给body就可以了
document.body.style.backgroundImage = 'url('+this.src+')';
}
}
</script>
</body>
</html>