DOM ------ 百度换肤

百度换肤：点击某个图片，设置该图片为背景图。

	//css代码
	  * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url(../Picture/图片1.png) no-repeat center top;
        }
        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;
        }
	//html代码
		<ul class="baidu"> 
	        <li><img src="../图片/图片1.png" alt=""></li>
	        <li><img src="../图片/图片2.png" alt=""></li>
	        <li><img src="../图片/图片3.png" alt=""></li>
	        <li><img src="../图片/图片4.png" alt=""></li>
	    </ul>
	//js代码
	//1.获取元素
	var imgs = document.querySelector('.baidu').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 + ')'
		}
	}

获取元素：获取的是 ul标签 下的所有img
循环遍历：遍历所有 img , 利用数组的形式 , 绑定函数 , 点击显示该背景
注意 : 图片地址的拼接形式为 'url(' + this.src + ')'

寄语: 不积跬步，无以至千里；不积小流，无以成江海。

标签：换肤,body,img,DOM,baidu,url,------,src,margin
来源： https://blog.csdn.net/qq_45902692/article/details/122818807