网页换肤（简洁写法[提供思路]）

网站更换皮肤样式，可以通过动态改变网页引入的css样式文件来实现。根据这个思路，此功能就变得简单：
css引入方式为（外部样式）：

<link href="./css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile"/>

//skin_0.css文件内容 【默认样式】

#skin li{
    display:inline-block; 
    float:left; 
    text-align:center;
    line-height:30px; 
    font-size:1em; 
    font-weight:bold; 
    color:blue;
    width:100px;
    height:30px;
    overflow:hidden;
    border:1px solid red;
    margin-left:5px;
    margin-top:2px;
}
.selected{
    background:orange;
}
#news,#game{
    background:#ccc;
}
#box_c{
    background:#efebde;
}

//my.css文件内容 【待切换的样式】

.selected{
    background:cyan;
}
#box_c{
    background:#eff8fe;
}

//html部分

<fieldset id="box_c">
    <legend>网页换肤</legend>
    <ul id="skin">
        <li id="skin_0" class="selected">样式一</li>
        <li id="my">样式二</li>
    </ul>
    <div style="clear:both;"><br/>
        选择背景色：<input type="color" name="sel_color" style="clear:both;"/>
    </div>
    <div id="div_side_0" style="clear:both;">
        <div id="news">
            <h1 class="title">语文</h1>
        </div>
    </div>
    <div id="div_side_1">
        <div id="game">
            <h1 class="title">数学</h1>
        </div>
    </div>
</fieldset>

//jQuery

//换肤
$('#skin li').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    //更改样式文件
    $('#cssfile').attr('href','./css/'+this.id+'.css?r='+Math.random());
})
//下面这个是补充内容，当通过颜色选择器进行选择时，可以改变整个网页的肤色；
$('input[name="sel_color"]').change(function(){
    var sel_c=$(this).val();
    $('body').css('backgroundColor',sel_c);
})

换肤效果：
样式一：

样式二：

补充内容：
可以通过颜色选择器，进行自主设置：

自主定义整个网站的背景色：