javascript 入门之简单换肤效果

大家好，我是小强老师，这里简单入门 做一个换肤效果

效果如图所示：

这个案例思路分为两部分：

1. 获取元素对象。

      var pic1 = document.getElementById('pic1');
      var pic2 = document.getElementById('pic2');
      var pic3 = document.getElementById('pic3');

分别获取这三个图片，并且放入 相应的变量中。

2.操作元素对象。

当我们点击（ onclick ）第一个小图片的时候（pic1）， 我们整个的页面背景就要换成相应的页面第一个大背景了。

document.body.style.backgroundImage = 'url("images/1.jpg")';

  别忘了，更换样式，要加上 style。

怎么样，简单吧！

1. css部分

   *{margin:0;padding:0}
   body{
       background:url("images/1.jpg") no-repeat top center;
   }
   #box{
       width:100%;
       height:200px;
       background: rgba(255, 255, 255, .3);
       text-align: center;
   }
   #box img{
       width:200px;
       margin-top:30px;
       cursor: pointer;
   }

2. js部分

   window.onload = function(){
   // 入口函数 等着整个页面加载完毕才执行里面的信息
   var pic1 = document.getElementById('pic1');
   var pic2 = document.getElementById('pic2');
   var pic3 = document.getElementById('pic3');
   pic1.onclick = function(){
   document.body.style.backgroundImage = 'url("images/1.jpg")';
   }
   pic2.onclick = function(){
   document.body.style.backgroundImage = 'url("images/2.jpg")';
   }
   pic3.onclick = function(){
   document.body.style.backgroundImage = 'url("images/3.jpg")';
   }
   }