一个网页换肤 实例

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

如果通过改变当前作用样式表的地址的方法，可能会有下载和应用样式表的时间延迟，我们可以充分利用 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);
            }
        )    
    })