创建一个名为switcher.php的文件,内容如下:
<?php$style = $_GET["style"];setcookie('style',$style,time()+31536000,'/','.site.com','0');header("location:".$_SERVER['HTTP_REFERER']);?>
这段脚本先读取query数据,然后把参数style的值记入cookie,最后返回上一页。接下来我们就可以创建两个用于切换样式的链接了,并且放在合适的页面上,比如首页或用户管理后台(注意把其中的site.com换成你的域名):
<a href="switcher.php?style=a">主题A</a>
<a href="switcher.php?style=b">主题B</a>
点击任意一个链接,相应的就会把“a或“b记入cookie,然后就需要一段脚本来读取这个cookie值并且输出XHTML来引入对应的CSS:
<?php if(isset($_COOKIE["style"])){; $style = $_COOKIE["style"]; }else{; $style = "a";//默认采用主题A }?>
<link rel="stylesheet" type="text/css"
;title="当前选择的主题" href="<?php echo $style ?>.css" />
每一个需要切换样式的页面都要加上这段代码,所以直接把它加入网站的头文件中就行了。当然你可以根据自己的需要修改这个脚本,但万变不离其宗,总的思路应该是不变的。
<script type="text/javascript">
function setStyle(title) {
//预定义变量
; var i, links;
//用DOM方法获得所有的link元素
; links = document.getElementsByTagName("link");
;
; for(i=0; links[i]; i++) {
//判断此link元素的rel属性中是否有style关键字
;//即此link元素是否为样式表link
;//同时判断此link元素是否含有title属性
;if(links[i].getAttribute("rel").indexOf("style") != -1
; && links[i].getAttribute("title")) {
//先不管三七二十一把它设为disabled
;;;links[i].disabled = true;
//再判断它的title中是否有我们指定的关键字
;;;if(links[i].getAttribute("title").indexOf(title) != -1)
//如果有则将其激活
;;;;;links[i].disabled = false;
;}
; }
}
</script>
<link rel="stylesheet" type="text/css"
;title="主题A" href="a.css" />
<link rel="alternate stylesheet" type="text/css"
;title="主题B" href="b.css" />