這個網(wǎng)站風(fēng)格切換除了帶記憶功能外,還可設(shè)定保持時間,比如5天-180天,過了時間就自動恢復(fù)到默認(rèn)樣式表。
樣式表連接,設(shè)3種風(fēng)格,把你要改變的圖片背景等寫入樣式表。
- <link rel="stylesheet" type="text/css" href="css/bg1.css" title="bg1" />
- <link rel="stylesheet" type="text/css" href="css/bg2.css" title="bg2" />
- <link rel="stylesheet" type="text/css" href="css/bg3.css" title="bg3" />
第一個是默認(rèn)樣式表。
JS代碼如下:
- //Style Sheet Switcher version 1.0 Nov 9th, 2005
- //Author: Dynamic Drive: http://www.
- //Usage terms: http://www./notice.htm
- function getCookie(Name) {
- var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
- if (document.cookie.match(re)) //if cookie found
- return document.cookie.match(re)[0].split("=")[1] //return its value
- return null
- }
- function setCookie(name, value, days) {
- var expireDate = new Date()
- //set "expstring" to either future or past date, to set or delete cookie, respectively
- var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
- document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
- }
- function deleteCookie(name){
- setCookie(name, "moot")
- }
- function setStylesheet(title) {
- var i, cacheobj
- for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
- if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {
- cacheobj.disabled = true
- if(cacheobj.getAttribute("title") == title)
- cacheobj.disabled = false //enable chosen style sheet
- }
- }
- }
- function chooseStyle(styletitle, days){
- if (document.getElementById){
- setStylesheet(styletitle)
- setCookie("mysheet", styletitle, days)
- }
- }
- var selectedtitle=getCookie("mysheet")
- if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one stored
- setStylesheet(selectedtitle)
調(diào)用方法
- <a title="默認(rèn)風(fēng)格" href="javascript:chooseStyle('bg1',5)">默認(rèn)風(fēng)格</a>
- <a title="橙色風(fēng)格" href="javascript:chooseStyle('bg2',5)">橙色風(fēng)格</a>
- <a title="藍(lán)色風(fēng)格" href="javascript:chooseStyle('bg3',5)">藍(lán)色風(fēng)格</a>
注意:title內(nèi)容改成你樣式表的名字,我這里是設(shè)定為5天。