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

网站更换皮肤样式，可以通过动态改变网页引入的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);})

换肤效果：
样式一：

样式二：

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

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