用js來實現頁面的換膚功能
js實現換膚功能的實現主要是通過利用js控制CSS來實現的。大致的實現原理是這樣的，
1、先定義一個頁面基本樣式style.css來確定div的寬高等屬性，使得整個頁面的DIV元素有一個基本的框架結構。
2、再定義一系列的樣式color1.css,color2.css……用來確定DIV元素的背景顏色，邊框顏色等等。
3、用JS函數來決定調用哪個樣式，並把調進來的樣式寫進cookie，這樣就可以達功能。
例如：我們的頁面結構如下：
<div id="header"></div>
<div id="contant"></div>
<div id="footer"></div>
-------------------------------------------
style.css
#header{width:700px;height:120px; margin:0px auto;}
#contant{width:700px;height:400px; margin:0px auto;}
#footer{width:700px;height:200px; margin:0px auto;}
-------------------------------------------
color1.css
#header,#contant,#footer{boder:1px solid #dfaf33; background-color:#eeeeee;}
-------------------------------------------
color2.css
#header,#contant,#footer{boder:1px solid #ff00ea; background-color:#ff3322;}
-------------------------------------------
頁面中這兩行比較關鍵:
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/color1.css" id="color" rel="stylesheet" type="text/css" />
第1行引入頁面的基本樣式,第2行引入一個顏色樣式color2.css給頁面一個初始化顏色,第2行中有一個id="color"這個很關鍵它為JS函數提供了
接口，js通過這個id改變href的值來決定引入那個顏色樣式，從而達到改變頁面顏色樣式的目的。
改變顏色樣式的按鈕我們可以用文字鏈接來實現，也可以用其他元素來實現。
<a onclick="changeStyle(1)">樣式1</a>
<a onclick="changeStyle(2)">樣式2</a>
--------------------------------------------
實現這些功能的js函數：
function getObject(elementId) { //獲取指定id的object
if (document.getElementByIdx) {
return document.getElementByIdx(elementId);
} else if (document.all) {
return document.all[elementId];
} else if (document.layers) {
return document.layers[elementId];
}
}
function changeStyle(id){//切換樣式
var stylesheet=getObject("color").href="css/color"+id+".css";
document.cookie="stylesheet="+escape(stylesheet);//寫入Cookie
//alert(document.cookie);
//alert(stylesheet);
}
function initStyle(){ //初始化樣式，如果cookie存在樣式，則加載cookie樣式，否則加載默認樣式
if(/stylesheet=([^;]+)/.test(document.cookie))//判斷是否存在cookie.
getObject("color").href=unescape(RegExp.$1);
//alert(/stylesheet=([^;]+)/.test(document.cookie));
}
initStyle();