CSS切换实例解析
这类程序相关的介绍有很多,但在理解上可能会有些困难,我直接把W3S教程里的一些举例代码拿来做了下修改便完成了类似的功能,内容涉及到JS和DOM,但不是太难,相信大家可以理解 ^_^
实例的几个文件介绍
整个例子用到三个文件(没有把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>
« 起点 :: 合理的使用HTML标签进行CSS布局 »
test
这个做法没有很好的预留退路
假设我禁止js会怎样