思路:当点击了某个图片时,就把页面背景改为当前图片。核心就是把当前图片的src路径给取出来,给body当做背景即可。
注:当使用querySelector来获取元素的时候:
类名前加"." id名前加"#" (不要忘了)
<body>
<ul class="baidu">
<li><img src="./img/1.jpg" alt="" /></li>
<li><img src="./img/2.jpg" alt="" /></li>
<li><img src="./img/3.jpg" alt="" /></li>
</ul>
<script>
//获取元素
var img = document.querySelector(".baidu").querySelectorAll("img");
//循环注册事件
for (var i = 0; i < img.length; i++) {
img[i].onclick = function() {
//this.src 点击图片的路径
document.body.style.backgroundImage = "url(" + this.src + ")";
};
}
</script>
</body>