改变文章字体大小/背景颜色（含cookie控制）

我要评论2011/03/24 23:43:43 来源：绿色资源网编辑：绿色资源站评论:0点击:493次

1、

2、<HTML>
< HEAD>
< STYLE type="text/css">
.bfont {font-size:20px;}
.nfont {font-size:16px;}
.sfont {font-size:12px;}
.cdiv {font-size:12px;}
.cdiv span {cursor:hand;text-decoration:underline;color:blue;}
< /STYLE>
< TITLE> 用onclick事件实现改变文章字体大小</TITLE>
< /HEAD>
< BODY id = pgcontent class = nfont>
< div class = cdiv>
< span onclick= "pgcontent.className='bfont';">大字体</span> |
< span onclick= "pgcontent.className='nfont';">中字体</span> |
< span onclick= "pgcontent.className='sfont';">小字体</span>
< /div>
< p>点击上面的“大字体”，“中字体”，“小字体”，可以相应改变字体大小。</p>
< /BODY></HTML>

3、

<div id="zoom">改变字体大小</div>
[<a href="javascript:doZoom(12)">大字体</a>
< a href="javascript:doZoom(10.5)">中字体</a>
< a href="javascript:doZoom(9)">小字体</a>]

4、加入cookie控制

function setCookie(name, value)  //cookies设置
{
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
if(expires!=null){
   var LargeExpDate = new Date ();
   LargeExpDate.setTime(LargeExpDate.getTime() + (expires*1000*3600*24));
}
document.cookie = name + "=" + escape (value) + "; path=/;" +((expires == null) ? "" : (" expires=" +LargeExpDate.toGMTString()));
}

// 内容样式用户定义
function ContentSize(size)
{
var obj=document.getElementById("content");
obj.style.fontSize=size>0 ? size+"px" : "";
if (arguments.length==1){
   setCookie("iwmsFontSize",size,size==0?-1:1);
}
}
function ContentBg(color)
{
var obj=document.getElementById("bodyTd");
obj.style.backgroundColor=color;
if (arguments.length==1){
   setCookie("iwmsContBg",color,color.length==0?-1:1);
}
}
function InitContStyle()
{
var v=getCookie("iwmsFontSize");
if (v.length>0){
   ContentSize(v,false);
}
v=getCookie("iwmsContBg");
if (v.length>0){
   ContentBg(v,false);
}
}