排他思想点击切换背景图片

点击切换背景图片

js
 var imgs = document.querySelector('.box1').querySelectorAll('img')
    console.log(imgs);
    for( var i = 0;i<imgs.length;i++){
      imgs[i].onclick = function(){
        // console.log(this.src);
        document.body.style.backgroundImage ='url( ' + this.src + ' )'
        
      }
    }
html
<ul class="box1">
    <li><img src="./img1/p1.jpg" alt=""></li>
    <li><img src="./img1/p2.jpg" alt=""></li>
    <li><img src="./img1/p3.jpg" alt=""></li>
    <li><img src="./img1/p4.jpg" alt=""></li>
  </ul>
css
body,html{
    background: url("./img1/p4.jpg") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  ul{
    margin: 100px 0 0 200px;
  }
  li{
    float: left;
    margin: 0 0 0 10px;
  }
  img{
   width: 100px;
   height: 100px;
 }