类似tom网站给系统换肤的实现方法。

首先，换肤设计要保证皮肤更改的信息能够存在cookie里，使得用户下次访问的时候还能够看到自己上次的设置。这里换肤我们用到的是通过js调用不同的样式。然而在我们正在做的系统中，我们用到了IFRAME，要保证整体页面的一致，我们还要考虑从父页面给IFRAM的子页面加载样式文件。下面先给出JS：

 

Code
function $(obj) {
    return document.getElementById(obj);
}

var skin = {};

skin.addEvent = function() {
    var skins = $("skin").getElementsByTagName("span");
    for (i = 0; i < skins.length; i++) {
        skins[i].onclick = function() { skin.setSkin(this.id.substring(5)) };
    }
}
//设置Cookie值，可以参考我的博客http://www.cnblogs.com/shineqiujuan/archive/2008/09/17/1292647.html
skin.setCookie = function(n) {
    var expires = new Date();
    expires.setTime(expires.getTime() + 24 * 60 * 60 * 365 * 1000);
    var flag = "Skin_Cookie=" + n;
    document.cookie = flag + ";expires=" + expires.toGMTString();
}
//以下是读Cookie值的方法，可以参考我的博客http://www.cnblogs.com/shineqiujuan/archive/2008/09/17/1292647.html
skin.readCookie = function() {
    var skin = 0
    var mycookie = document.cookie;
    var name = "Skin_Cookie";
    var start1 = mycookie.indexOf(name + "=");
    if (start1 == -1) {
        skin = 0;
    }
    else {
        var start = mycookie.indexOf("=", start1) + 1;
        var end = mycookie.indexOf(";", start);
        if (end = -1) {
            end = mycookie.length;
        }
        var values = unescape(mycookie.substring(start, end));
        if (values != null) {
            skin = values;
        }
    }
    return skin;

}
//设置皮肤样式，其实是调用已经准备好的样式表
skin.setSkin = function(n) {
    var skins = $("skin").getElementsByTagName("span");
    for (i = 0; i < skins.length; i++) {
        skins[i].className = "";
    }
    skin.setCookie(n);
    try {
        $("skin_" + n).className = "selected";
        $("cssfile").href = "css/all" + n + ".css";
        //  iframe_left.document.getElementsByTagName("link")[0].href = "css/all" + n + ".css";
    }
    catch (ex) {
        $("skin_" + 0).className = "selected";
        $("cssfile").href = "css/all" + 0 + ".css";
    // iframe_left.document.getElementsByTagName("link")[0].href = "css/all" + 0 + ".css";
    }
}
//最先的入口，先读cookie
window.onload = function() {
    skin.setSkin(skin.readCookie());
    skin.addEvent();
}

整个系统中一共准备了6套样式，分别为all0,all1,...all5;在第一套样式中定义好系统默认的样式，其他的样式分别对要改变的元素进行不同的样式设置。
而在CSS当中也用到了简单的滑动门技术：

Code
 1#skin
 2{}{
 3    margin-top:0px;
 4    margin-left:10px;
 5    margin-right:10px;
 6    margin-bottom:10px;
 7    padding-top:0px;
 8    padding-left:5px;
 9    padding-bottom:5px;
10    padding-right:0px;
11    list-style:none;
12    border: 0px solid #CCCCCC;
13    overflow:hidden;
14    }
15#skin li{}{
16    float:left;
17    margin-right:5px;
18    margin-top:0px;
19    width:15px;
20    height:15px;
21    text-indent:-999px;
22    overflow:hidden;
23    display:block;
24    cursor:pointer;
25    background-image:url(../images/theme.gif);
26}
27#skin_0{}{
28    background-position:0px 0px;
29}
30#skin_1{}{
31    background-position:15px 0px;
32}
33#skin_2{}{
34    background-position:35px 0px;
35}
36#skin_3{}{
37    background-position:55px 0px;
38}
39#skin_4{}{
40    background-position:75px 0px;
41}
42#skin_5{}{
43    background-position:95px 0px;
44}
45#skin_0.selected{}{
46    background-position:0px 15px !important;
47}
48#skin_1.selected{}{
49    background-position:15px 15px !important;
50}
51#skin_2.selected{}{
52    background-position:35px 15px !important;
53}
54#skin_3.selected{}{
55    background-position:55px 15px !important;
56}
57#skin_4.selected{}{
58    background-position:75px 15px !important;
59}
60#skin_5.selected{}{
61    background-position:95px 15px !important;
62}
63
64/**//*End of css for skin*/

点击的图片如下：
而在系统中显示的图片如下：
相应的代码为：

Code

   
      <ul id="skin">
 <li id="skin_5" title="紫色">紫色</li>
 <li id="skin_4" title="灰色">灰色</li>
 <li id="skin_3" title="粉红">粉红</li>
 <li id="skin_2" title="绿色">绿色</li>
 <li id="skin_1" title="蓝色">蓝色</li>
 <li id="skin_0" title="橙色">橙色</li>
 </ul>

 

这样一来，就实现了系统的换肤效果。