CSS切换实例解析[转]

keel

浏览: 45207 次

最近访客更多访客>>

senvon

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS C C++C#JavaScript

作者：Linyupark / 2006-04-07

实例的几个文件介绍
整个例子用到三个文件(没有把JS分离出来,在实际运用中应该分离):
1.css 这个文件设置了h1的字体大小为80px
2.css 将h1的字体设置为20px
createStyleSheet.html 头部写进了JS代码
点这查看效果

具体代码分析
CSS文件的内容如下,所表达的意思在上面已经说了,本身没什么特别的,只是为了突出下变化的效果:/* 1.css的文件内容 */
h1{
font-family:"Trebuchet MS";
font-size:80px;
}
/* 2.css的文件内容 */
h1{
font-family:"Trebuchet MS";
font-size:20px;
}
现在我们开始分析重头,createStyleSheet.html文件中几个重要的部分:
1.导入CSS文件的语句
该语句中可以发现并没有定义href属性,因为在后面我们要根据选择不同的样式来给它添加进去,多了一个ID属性是为了能使用 getElementById来将这个语句定义为一个对象来使用它(后面会涉及到):<link rel="stylesheet" id="CSSC" type="text/css">
2.JS部分<script language="javascript">
var i,objCSS,cssname;
objCSS = document.getElementById("CSSC");
/*
上面定义的 i为CSS文件后缀前的名称字符串,在这个实例中它的值分1和2两种情况
objCSS则为前面提到的CSS连接语句的对象.
*/
function change(i){
setCookie('cssname',i,365);
objCSS.setAttribute("href",i+".css");
}
/*
以上为函数change(i),它的职能是当有事件触发这个函数时,
设置浏览器cookie中cssname的值为i,
并且该cookie过期时间为365天(具体的设置过程使用了函数setCookie).
并给objCSS对象加上了属性href,它的值为i.css
*/
function checkStyle()
{
cssname=getCookie('cssname');
if (cssname!=null)
{
objCSS.setAttribute("href",cssname+".css");
}
}
/*
checkStyle()这个函数在页面加载的时候就执行,
其目的就是判断当前是否存在cookie保存的样式信息,
有的话就直接设置所保存的样式.
达成这个目的使用到了getCookie函数,
当返回的结果不为null的时候就执行设置样式的代码.
*/
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate);
}
/*
setCookie函数就起到保存信息的作用,里面包含了三个参数:
c_name用来指定是保存名为什么的cookie,并依据这个名称来做以后的调用
value就是这个cookie实际要保存的值
sepiredays是设置过期的时间,
在这里它还做了一个判断,如果不写这个过期的时间就表示不进行保存
*/
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end));
}
}
return null
}
/*
这就是对现有cookie做判断的函数,为null就返回一个null,
不为null就返回指定cookie的值
*/
</script>
3.html代码 <body onload="checkStyle()"> 
<input type="button" onclick="change(1)" value="改变成1样式">
<input type="button" onclick="change(2)" value="改变成2样式">
<h1>hahahahahhahahaah</h1>
</body>

分享到：