用js控制cookies来调用css(类似Tom首页)

发布:zhangbaozz

20 Oct

申明版权：
转载自sohu的blog-- “好好的好好” 链接地址：http://golen.blog.sohu.com/
此文链接地址：《2008-07-24 | 好好的css学习笔记(十九): 用js调用不同的css文件》链接地址：http://golen.blog.sohu.com/95415049.html?act=1224484814105

很早以前就发现tom首页改版了，而且超级好玩，可以自己定义板块，而且全部用的js调用，然后保存到cookies，连css也可以，
呵呵，比较好奇。今天上网搜搜，发现有一篇这样文章，转载过来，

经常会看到一些网站可以换皮肤,比如现在版本的tom网站(tom.com)

只要选中不同的颜色，整个页面的风格就会呈现出不同的css，而且不论是刷新还是关闭页面都会保留你所选的风格，(一定是保存在css里面了～～ -_-!! )

我（是“好好的好好”，不是“崩溃”）仿照这个做了一个同理的效果,用js来分离不同的css文件.
代码如下：

==========================================
<!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>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>用js调用不同的css</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script>
var csspath = "css/style";
var styleid=0;
document.write(<link rel="stylesheet" type="text\/css" id="csslink" href="+csspath+styleid+.css" \/>);
var csslink=document.getelementbyid("csslink");
function stylechange(n) {
csslink.href = csspath+n+".css";
}
</script>

</head>

<body>
<div id="title">
换个颜色换种心情：
<a href="javascript:stylechange(1);" class="red">点我变红色</a>
<a href="javascript:stylechange(2);" class="yellow">点我变黄色</a>
<a href="javascript:stylechange(3);" class="blue">点我变蓝色</a>
<a href="javascript:stylechange(4);" class="green">点我变绿色</a>
</div>
<div id="warptest">
用js调用不同的css测试文字测试文字</div>
</body>
</html>

然后在新建5个不同的css文件
文件1 style.css
* { font-size:12px}
a.red { color:#ff3333; text-decoration:underline}
a.red:hover { color:#ff9999; text-decoration:none}
a.yellow { color:#ebd852; text-decoration:underline}
a.yellow:hover { color:#eae366; text-decoration:none}
a.blue { color:#0066cc; text-decoration:underline}
a.blue:hover { color:#00ccff; text-decoration:none}
a.green { color:#009933; text-decoration:underline}
a.green:hover { color:#33ffcc; text-decoration:none}
#title { width:500px; height:30px; line-height:30px}
#warptest { width:480px; height:100px; background:#f7f7f7; border:1px solid #d3d3d3; padding:10px; color:#666}

文件2 style1.css
#warptest { width:480px; height:100px; background:#fdf8f8; border:1px solid #ef8a8a; padding:10px; color:#7a0d0d}

文件3 style2.css
#warptest { width:480px; height:100px; background:#fffff7; border:1px solid #ffcc00; padding:10px; color:#b28f06}

文件4 style3.css
#warptest { width:480px; height:100px; background:#e8f5fe; border:1px solid #a9c9e2; padding:10px; color:#1b3d58}

文件5 style4.css
#warptest { width:480px; height:100px; background:#f8ffe7; border:1px solid #abdc8d; padding:10px; color:#33581d}
==========================================

分别点击的效果:

==========================================
看到这大家会发现,假如我点了蓝色皮肤之后,刷新一下页面或者关掉页面下次在开的时候并没有保留,又回到了默认页面,怎么样才能解决这个问题呢?也就是需要能够记住页面的cookies,感谢可乐把代码升级了一下:

script language="javascript" type="text/javascript">
function getcookie(name)
    {
        var arr,reg=new regexp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg)) return unescape(arr[2]);
        else return null;
    }
    function setcookie(name,value)
    {
        var days = 30;
        var exp = new date();
        exp.settime(exp.gettime() + days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.togmtstring();
    }
var csspath = "css/style";
var styleid=0;
//document.write(<link rel="stylesheet" type="text\/css" id="csslink" href="+csspath+styleid+.css" \/>);