js练习题：网页换肤

实现网页换肤

当点击颜色小图标时实现换肤，即     对导航条nav以及body的背景颜色进行更换

 

小图标的设置为（以红色为例）

边框  border：1px  red solid；

背景色 background：red；

当图标被点击时背景色变为白色

background：white；

 

其他的小图标类似

 

所以将  background：white；

设置为类current的属性值

 

当图标被点击时

 

将此类名赋予该图标，点击另一图标时，类名赋予另一图标，之前的类名赋予撤销

 

所以用到for/in循环

 

 

 

将每种换肤css设置  独立存放为不同的css文档

green.css    blue.css

当点击对应颜色的小图标，调用对应的css文件

 

 

所以在此可以扩展应用：不仅可以实现网页换肤，还可以实现字体颜色的变换，字体的大小的变换等等css设置

 

可以为你的网页增添多重浏览样式

 

 

 

 

 

 

window.onload = function (){
    var oLink = document.getElementsByTagName("link")[0];
    var oSkin = document.getElementById("skin").getElementsByTagName("li");
    
    for(var i = 0; i< oSkin.length; i++){
        oSkin[i].onclick = function (){
            for(var p in oSkin) oSkin[p].className = "";
            this.className = "current";
            oLink['href'] = this.id + ".css";
        }   
    }
};