JavaScript如何实现换肤效果
1、打开电脑上的Hbuilder软件，创建一个web项目，打开.html页面，如图所示：
2、首先，我们先来编写基本布局，其实非常简单，通过div来布局，吧所需要的图片的放在div中
3、然后，我们来编写css，在这里本人用的是内部样式表，直接在里面加入<style></style>标签，如下图所示：
4、最后，我们来编写最重要的JavaScript部分，首先通过<script></script>标签来引入JavaScript，接着获取元素，转变图片.如下图：
5、这样就写好了所有的代码，运行一下看看吧，
6、下面附带代码，可以试试：
css部分：
<style type="text/css">
*{
margin: 0px;
padding:0px;
}
img{
width:200px;
height:100px;
float:left;
}
body{
background-image:url(img/1.jpg);
}
.header{
width: 1000px;
height: 100px;
margin: 0 auto;
}
</style>
页面布局部分：
<div class="header">
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
</div>
JavaScript部分：
<script type="text/javascript">
window.onload=function(){
var imgs=document.getElementsByTagName("img");
imgs[0].onclick=function(){
document.body.style.backgroundImage="url(img/1.jpg)";
}
imgs[1].onclick=function(){
document.body.style.backgroundImage="url(img/2.jpg)";
}
imgs[2].onclick=function(){
document.body.style.backgroundImage="url(img/3.jpg)";
}
imgs[3].onclick=function(){
document.body.style.backgroundImage="url(img/4.jpg)";
}
imgs[4].onclick=function(){
document.body.style.backgroundImage="url(img/5.jpg)";
}
}
</script>