JS版网站风格切换实例代码

　　<link media="screen" href="/css/default.css" rel="stylesheet" type="text/css" title="default" />

　　<link media="screen" href="/css/blue.css" rel="alternate stylesheet" type="text/css" title="blue" />

　　<link media="screen" href="/css/orange.css" rel="alternate stylesheet" type="text/css" title="orange" />

　　//Style Sheet Switcher version 1.0 Nov 9th, 2005

　　//Author: Dynamic Drive: http://www.dynamicdrive.com

　　//Usage terms: http://www.dynamicdrive.com/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)

　　<a title="默认风格" href="javascript:chooseStyle('default',5)">默认风格</a>

　　<a title="橙色风格" href="javascript:chooseStyle('orange',5)">橙色风格</a>

　　<a title="蓝色风格" href="javascript:chooseStyle('blue',5)">蓝色风格</a>