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 + ')'
    }
  }