JS简单实现浏览器换肤功能

提示：以下是本篇文章正文内容，下面案例可供参考

1.给每个li引入图片，并且利用循环给每个li绑定一个点击事件

代码如下（示例）：

//body部分代码，给每个li引入需要换肤的背景图片
<ul>
  <li> <img src="../beijing1.jpeg" alt=""></li>
  <li> <img src="../beijing2.jpeg" alt=""></li>
  <li> <img src="../beijing3.jpeg" alt=""></li>
</ul>
//JS部分
<script>
    //dom获取所有img图片
    var imgs = document.querySelectorAll('img')
    //利用循环给每个li绑定一个事件
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].onclick = function () {
      //获取body标签的背景图片属性 并把当前点击的图片地址赋值给body
       document.body.style.backgroundImage = 'url('+ this.src +')'
      }
    }   
    </script>
    
   <style>
    body{
      margin: 0;
      padding: 0;
    }
    ul {
      margin: 0;
      padding: 0;
    }
    li{
      list-style-type: none;
      list-style-position:outside;
    }
    li img {
      width: 50px;
      height: 50px;

    }
  </style>