实现方式:
一、CSS设置部分:
每种风格设置一个套样式表,分别放在不同的文件夹中,最好CSS样式表中用到的背景图片等也放在该文件夹下, 把文件夹地址作为系统环境变量。
通常,需要写一个网站通用的CSS文件,该文件一般只控制css的位置布局,不涉及颜色,背景布局,然后每套风格只涉及换肤方案的css文件,这里就只控制颜色,背景。
页面使用部分:
需要使用系统变量来读取样式表和图片文件
Java代码
- <link rel="stylesheet" href="jquery-easyui-1.3.3/themes/default/easyui.css" type="text/css"></link>
- <link rel="stylesheet" href="jquery-easyui-1.3.3/themes/icon.css" type="text/css"></l
变量的设置和读取:
设置事件:
function change(type)
{
if(type == "black")
{
document.getElementById("myCss").href="jquery-easyui-1.3.3/themes/black/easyui.css";
}
if(type == "gray")
{
document.getElementById("myCss").href="jquery-easyui-1.3.3/themes/gray/easyui.css";
}
if(type == "blue")
{
document.getElementById("myCss").href="jquery-easyui-1.3.3/themes/default/easyui.css";
}
return ;
}
读取:
<div id="menuHuanFuGuanLi" style="width:60px;">
<div><a href="#" style="text-decoration: none;color:black;" οnclick="change('black')">黑色经典</a></div>
<div><a href="#" style="text-decoration: none;color:black" οnclick="change('gray')">灰色畅想</a></div>
<div><a href="#" style="text-decoration: none;color:black" οnclick="change('blue')">蓝色海洋</a></div>
</div>
那么这个简单的换肤就实现了,但是假如要实现整个浏览全过程的话,就要把css存在cookie中,每次从cookie中读取css文件,那么就实现我们的换肤功能啦,