js网页换肤

网页换肤

1. 需求：鼠标点击小图片时，页面中body的背景图变成当前被点击小图，如下图：
2. 步骤：

• 1）获取所有小图和body元素
• 2）遍历小图，给每个小图添加点击事件，让body的背景图为当前被点击小图的src（图片路径）
  

html

		<ul class="uls">
	        <li><img src="images/01.webp" alt=""></li>
	        <li><img src="images/02.webp" alt=""></li>
	        <li><img src="images/03.webp" alt=""></li>
	        <li><img src="images/04.webp" alt=""></li>
	        <li><img src="images/05.webp" alt=""></li>
	    </ul>

css

		body{
            background: url("images/01.webp") no-repeat;
            background-size: cover;
            margin: 0;
            padding: 0;
        }	
        .uls{
            width: 1100px;
            display: flex;
            margin: 100px auto;
        }
        .uls>li{
            width: 200px;
            height: 100px;
            list-style: none;
            margin: 10px;
        }
        .uls>li>img{
            width: 100%;
            height: 110px; /* 此行需谨慎，因为我每张图的大小不一致，为了效果统一，设置固定的height，这样会造成图片变形，要谨慎…… */
        }

js

		var imgs = document.querySelector('.uls').querySelectorAll  ('img');  // 获取所有小图片
        var body = document.querySelector('body');  // 获取body元素
        for (var i = 0,len = imgs.length; i < len; i++) {  // 循环遍历小图片添加事件
            imgs[i].onclick = function(){
           		// this指向的是当前function被绑定的对象，即imgs[i],也就是当前被点击的小图
                body.style.backgroundImage = 'url('+ this.src +')'; // 将body的背景图改为当前被点击元素的src
            }
        }