目標是通過點擊圖片能無重新整理更換外部樣式表（換膚），且將最後一次的樣式設定儲存在cookie中 ，這樣，即使關閉瀏覽器再開啟還是上一次的皮膚。具體效果請看：http://www.feed-add.com/
如果覺得不放心或是有廣告嫌疑也可以去看看CCTV或者是TOM的首頁，原理和效果差不多但方法不一樣。
首先先建一個文字檔，輸入以下代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
var cssPath = "css/style";
var styleID=0;
//document.write('<link rel="stylesheet" type="text\/css" id="cssLink" href="'+cssPath+styleID+'.css" \/>'); function styleChange(n) {
var cssLink=document.getElementById("cssLink");
cssLink.href = cssPath+n+".css";
setCookie("color",cssPath+n+".css");
}
if (getCookie("color")!=null)
{
document.write('<link rel="stylesheet" type="text\/css" id="cssLink" href="'+getCookie("color")+'" \/>');
}
else
{
document.write('<link rel="stylesheet" type="text\/css" id="cssLink" href="'+cssPath+styleID+'.css" \/>');
}
</script> </head> <body><div id="title"> <a href="javascript:styleChange(1);" class="red" title="紫色">紫色</a>
<a href="javascript:styleChange(2);" class="yellow" title="黃色">黃色</a>
<a href="javascript:styleChange(3);" class="blue" title="藍色">藍色</a>
<a href="javascript:styleChange(4);" class="green" title="綠色">綠色</a>
</div>
<div id="warptest">
測試文字測試文字</div>
</body>
</html> 儲存並重新命名為index.html,然後在根目錄下建立一個名為CSS的檔案夾，把下面這張圖片重新命名為theme.gif放入這個檔案夾中 此主題相關圖片如下：theme.gif
，再在這個檔案夾中建立五個文字檔，分別重新命名為：style.css、style1.css、style2.css、style3.css和style4.css，以下是各個css檔案的內容：
style.css: #title a.red { background-position:15px 0px;}
#title a.yellow { background-position:75px 0px;}
#title a.blue { background-position:55px 0px;}
#title a.green { background-position:95px 0px;}
#warptest { width:480px; height:100px; background:#f7f7f7; border:1px solid #d3d3d3; padding:10px; color:#666;float:left}
#title{float:left}
#title a {margin-right:5px;
width:15px;
height:15px;
text-indent:-999px;
overflow:hidden;
display:block;
cursor:pointer;
background-image:url(theme.gif);}
style1.css： #warptest { width:480px; height:100px; background:#fdf8f8; border:1px solid #990099; padding:10px; color:#990099}
#title a.red { background-position:15px 15px;}
style2.css：
#warptest { width:480px; height:100px; background:#fffff7; border:1px solid #ffcc00; padding:10px; color:#b28f06}
#title a.yellow { background-position:75px 15px;} style3.css：
#warptest { width:480px; height:100px; background:#e8f5fe; border:1px solid #a9c9e2; padding:10px; color:#1b3d58}
#title a.blue { background-position:55px 15px;}
style4.css：
#warptest { width:480px; height:100px; background:#f8ffe7; border:1px solid #abdc8d; padding:10px; color:#33581d}
#title a.green { background-position:95px 15px;}
好了，全部儲存，用瀏覽器開啟index.html,看看是不是很帥哈。 |
