TA的每日心情 | 开心
2021-3-12 23:18 |
|---|
签到天数: 2 天 [LV.1]初来乍到
|
|
整个例子用到三个文件(没有把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文件的语句
<link rel="stylesheet" id="CSSC" type="text/css">
该语句中可以发现并没有定义href属性,因为在后面我们要根据选择不同的样式来给它添加进去,多了一个ID属性是为了能使用 getElementById来将这个语句定义为一个对象来使用它(后面会涉及到):
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>
源码下载：http://file.javaxxz.com/2014/11/8/235539531.zip |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2014-11-8 23:55:39