实现网页换肤
当点击颜色小图标时实现换肤,即 对导航条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";
}
}
};