一个网页换肤 实例

网页换肤有一段时间比较流行，现在也是一个常用的效果之一，给用户一定的自定义的空间。其实现的原理无非是切换样式表

如果通过改变当前作用样式表的地址的方法，可能会有下载和应用样式表的时间延迟，我们可以充分利用 link 的rel 属性来设置当前哪个样式表是起作用的，哪些是备用的：

<link type="text/css" rel="alternate" id="c0" href="style/style09f.css" media="all" /> <!--备用样式表-->
<link type="text/css" rel="alternate" id="c1" href="style/style390.css" media="all" />
<link type="text/css" rel="alternate" id="c2" href="style/stylec00.css" media="all" />
<link type="text/css" rel="alternate" id="c3" href="style/stylef60.css" media="all" />
<link type="text/css" rel="alternate" id="c4" href="style/stylef39.css" media="all" />
<link type="text/css" rel="stylesheet" id="mc" href="style/style.css" media="all" title="主样式" /> <!--当前样式表-->

rel="alternate"  是备用的样式表， rel="stylesheet" 则是当前作用的样式表，通过切换  rel="stylesheet" 的样式表的地址即可。

<div class="colors" id="colors">
                <span class="c4">&nbsp;</span>
                <span class="c3">&nbsp;</span>
                <span class="c2">&nbsp;</span>
                <span class="c1">&nbsp;</span>
                <span class="c0">&nbsp;</span>
            </div>

$(document).ready(function(){
    //code goes here
    $("#colors").find("span").click(
        function(){
            var cid=$(this).attr("class");            
            var chr=$("#"+cid).attr("href");            
            $("#mc").attr("href",chr);
            }
        )    
    })