一个网页换肤 实例

网页换肤有一段时间比较流行，现在也是一个常用的效果之一，给用户一定的自定义的空间。其实现的原理无非是切换样式表
如果通过改变当前作用样式表的地址的方法，可能会有下载和应用样式表的时间延迟，我们可以充分利用 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"> </span>

<span class="c3"> </span>

<span class="c2"> </span>

<span class="c1"> </span>

<span class="c0"> </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);

}

)

})