Bobby

聚沙成塔 集腋成裘
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

js设置调用cookie设置背景颜色 字号、颜色

Posted on 2007-04-26 15:32  Bobby  阅读(1321)  评论(0)    收藏  举报
var tfs=GetCookie('bookfs');
//字体大小
var tbg=GetCookie('bookbg');
//背景颜色
var tfc=GetCookie('bookfc');
//字体颜色

if (tfs != null){
document.write ('<style type="text/css">');
document.write ('#text {  font-size: '+tfs+'px; }');
document.write ('</style>');
}
if (tbg != null){
document.write ('<style type="text/css">');
document.write ('body {  background-color: '+tbg+' }');
document.write ('</style>');
}
if(tfc != null)
{
document.write('<style type="text/css">');
document.write('#text {color:'+tfc+'}');
document.write ('</style>');
}

function GetCookieVal(offset)
//获得Cookie解码后的值
{
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function SetCookie(name, value)
//设定Cookie值
{
var expires = new Date();
expires.setTime(expires.getTime() + 12 * 30 * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + value + ";expires=" + expires.toGMTString();
}

function DelCookie(name)
//删除Cookie
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
}

function GetCookie(name)
//获得Cookie的原始值
{
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen)
{
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return GetCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

function setfs(id){
document.getElementById('text').style.fontSize=id+"px";
SetCookie('bookfs',id);
}

function setbg(id){
document.getElementsByTagName('body')[0].style.backgroundColor=id;
SetCookie('bookbg',id);
}

function setfc(id)
{
document.getElementById('text').style.color = id;
SetCookie('bookfc',id);
}
以上为js代码保存为setstyle,以下为html调用
<!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>无标题文档</title>
<style type="text/css">

a {
    COLOR: #4682b4
}
a:hover {
    COLOR: #ff4500
}

#text {
    FONT-SIZE: 16px; MARGIN: 5px auto 30px; WIDTH: 90%; LINE-HEIGHT: 180%; TEXT-ALIGN: left
}


}
.bg0 {
    BACKGROUND: #f2fafb
}
.bg1 {
    BACKGROUND: #e4ebf5 
}
.bg2 {
    BACKGROUND: #fbfbea 
}
.bg3 {
    BACKGROUND: #f4ebef
}
.bg4 {
    BACKGROUND: #ffffff
}
.fs0 {
    FONT-SIZE: 18px
}
.fs1 {
    FONT-SIZE: 14px
}
.fs2 {
    FONT-SIZE: 12px
}

}
</style>
<script type="text/javascript" src="setstyle.js"></script>
</head>
<body>
<div style="font-size: 12px; float: left; width: 98%; color: #000000; line-height: 30px;
                    font-family: Verdana, 宋体; text-align: right"> &nbsp;<span class="tools">字体：<a class="fs0" onclick="setfs('20')" href="javascript:void(0)">大</a> <a class="fs1" onclick="setfs('16')" href="javascript:void(0)">中</a> <a class="fs2"
                            onclick="setfs('14')" href="javascript:void(0)">小</a> 字体颜色：<a class="fs2" onclick="setfc('#484848')"
                                href="javascript:void(0)">黑色</a> <a class="fs2" onclick="setfc('#4372a5')" href="javascript:void(0)"> 蓝色</a> <a class="fs2" onclick="setfc('#505d71')" href="javascript:void(0)">蓝灰</a> <a class="fs2" onclick="setfc('#d01f3c')" href="javascript:void(0)">红色</a> <a class="fs2"
                            onclick="setfc('#828282')" href="javascript:void(0)">灰色</a> &nbsp;&nbsp;&nbsp;&nbsp;背景：<a
                                class="bg0" onclick="setbg('#f2fafb')" href="javascript:void(0)">绿色</a> <a class="bg1" onclick="setbg('#e4ebf5')" href="javascript:void(0)">蓝色</a> <a class="bg2"
                            onclick="setbg('#fbfbea')" href="javascript:void(0)">黄色</a> <a class="bg3" onclick="setbg('#f4ebef')"
                                href="javascript:void(0)">粉红色</a> <a class="bg4" onclick="setbg('#FFF')" href="javascript:void(0)"> 白色</a>&nbsp; </span> </div>
<div id="text">
显示内容
</div>
</body>
</html>