我想使用这个 styleswitcher 脚本（http://www.kelvinluck.com/assets/jquery/styleswitch/），但让它一次加载 2 个样式表。目的是用户可以选择字体大小和/或颜色和/或屏幕宽度。不确定这是否只是添加一个函数来处理多个 cookie 的情况？
这是我到目前为止所拥有的：（http://www.digitalkulture.com/example/）
如果有人有想法，我将不胜感激。谢谢你。
<!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>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="styles/defaultTheme.css" />
<link rel="alternate stylesheet" type="text/css" href="styles/silverTheme.css" title="silverTheme" />
<link rel="alternate stylesheet" type="text/css" href="styles/purpleTheme.css" title="purpleTheme" />
<link rel="alternate stylesheet" type="text/css" href="styles/highvisTheme.css" title="highvisTheme" />
<link rel="alternate stylesheet" type="text/css" href="styles/wideScreen.css" title="wideScreen" />
<link rel="alternate stylesheet" type="text/css" href="styles/fullScreen.css" title="fullScreen" />
<link rel="alternate stylesheet" type="text/css" href="styles/bigText.css" title="bigText" />
<!-- Scripts -->
<script type="text/javascript" src="js/jquery-1.6.1.js" /></script>
<script type="text/javascript" src="js/styleswitcher.js" /></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
var $sw_link = jQuery("a[title='themes_switch']");
jQuery(".dashTemplate a[title*=Theme]").click(function(){
jQuery(".dashTemplate a[title*=Theme]").removeClass("current");
jQuery(this).addClass("current");
});
jQuery(".dashTemplate a[title*=Screen]").click(function(){
jQuery(".dashTemplate a[title*=Screen]").removeClass("current");
jQuery(this).addClass("current");
});
jQuery(".dashTemplate a[title*=Text]").click(function(){
jQuery(".dashTemplate a[title*=Text]").removeClass("current");
jQuery(this).addClass("current");
});
jQuery(".dashTemplate a[title='defaultTheme']").addClass("defaultTheme").click(function(){
setActiveStyleSheet('defaultTheme');
return false;
});
jQuery(".dashTemplate a[title='silverTheme']").addClass("silverTheme").click(function(){
setActiveStyleSheet('silverTheme');
return false;
});
jQuery(".dashTemplate a[title='purpleTheme']").addClass("purpleTheme").click(function(){
setActiveStyleSheet('purpleTheme');
return false;
});
jQuery(".dashTemplate a[title='highvisTheme']").addClass("highvisTheme").click(function(){
setActiveStyleSheet('highvisTheme');
return false;
});
jQuery(".dashTemplate a[title='wideScreen']").addClass("wideScreen").click(function(){
setActiveStyleSheet('wideScreen');
return false;
});
jQuery(".dashTemplate a[title='fullScreen']").addClass("fullScreen").click(function(){
setActiveStyleSheet('fullScreen');
return false;
});
jQuery(".dashTemplate a[title='bigText']").addClass("bigText").click(function(){
setActiveStyleSheet('bigText');
return false;
});
});
</script>
</head>
<body>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus, purus non ultrices convallis, leo massa porta erat, et gravida magna quam at ante. Vivamus vitae sem lectus. Aliquam augue tortor, tincidunt vitae tempus ac, porta eu sem. Mauris laoreet erat vitae metus venenatis ac lacinia lorem ultricies.
</div>
<!--HTML selectors-->
<ul class="dashTemplate">
<li><a class="defaultTheme" title="defaultTheme" href="#">reset color</a> |
<li><a class="silverTheme" title="silverTheme" href="#">silver color</a> |
<li><a class="purpleTheme" title="purpleTheme" href="#">purple color</a> |
<li><a class="highvisTheme" title="highvisTheme" href="#">yellow color</a></li>
</ul>
<ul class="dashTemplate">
<li><a class="wideScreen" title="wideScreen" href="#">wide screen</a> |
<li><a class="fullScreen" title="fullScreen" href="#">full screen</a> |
<li><a class="defaultTheme" title="defaultTheme" href="#">reset</a></li>
</ul>
<ul class="dashTemplate">
<li><a class="bigText" title="bigText" href="#">big text</a> |
<li><a class="defaultTheme" title="defaultTheme" href="#">reset</a></li>
</ul>
</body>
</html>
styleswitcher.js 文件
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);