这里有一个示例,展示了如何实现此功能。它非常棒,因为即使刷新页面,它也会保留你选择的最后一个主题。
<html>
<head>
<link href="style1.css" media="all" rel="stylesheet" type="text/css" />
<link href="style2.css" media="screen" rel="alternate stylesheet" title="style2" type="text/css" />
<link href="style3.css" media="screen" rel="alternate stylesheet" title="style3" type="text/css" />
<script src="BCo.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>
<a href="javascript:chooseStyle('style1',60)" target="_self" >1</a>
</li>
<li>
<a href="javascript:chooseStyle('style2',60)" target="_self" >2</a>
</li>
<li>
<a href="javascript:chooseStyle('style3',60)" target="_self">3</a>
</li>
</ul>
<h1>test</h1>
</body>
</html>
这里是JS文件BCo.js的代码
var manual_or_random="manual"
var randomsetting="3 days"
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
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, randomize){
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) {
cacheobj.disabled = true
altsheets.push(cacheobj)
if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false
}
}
if (typeof randomize!="undefined"){
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : ""
}
function chooseStyle(styletitle, days){
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){
if (element[i].tagName=="OPTION")
element[i].selected=true
else
element[i].checked=true
break
}
}
}
}
if (manual_or_random=="manual"){
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null)
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){
if (getCookie("mysheet_s")==null)
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/"
else
setStylesheet(getCookie("mysheet_s"))
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting))
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting))
}
else
setStylesheet(getCookie("mysheet_r"))
}
}
请注意,以下是style1.css和style2.css代码:
style1.css代码
h1 {
font-family: Tahoma,arial;
font-size: 18px;
font-weight: bold;
line-height: 20px;
color: #1D828C;
}
style2.css代码
h1 {
color: #7c7c7c;
}