網站更換面板樣式，可以通過動態改變網頁引入的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);
})

換膚效果：
樣式一：

樣式二：

補充內容：
可以通過顏色選擇器，進行自主設定：

自主定義整個網站的背景色：