网站样式风格更换代码解读[风格切换]

作者: unvs 分类: Web前端 发布时间: 2011-03-24 22:28 ė12,063 views 6没有评论

网站通过js可以很好的控制风格的切换,今天特地找了些代码研究,闲话不多说,实例说明,有以下几步:

四、实例演示:点击查看

一、js代码:
<script language="javascript">
function changestyle(name) //更换样式
     {
    css=document.getElementById("cssfile"); //定义变量,获取页面id为cssfile元素对象并赋给css;(id=cssfile在链接样式代码里,下面第二步中有)
css.href="images/"+name+"/index.css"; //将css中href属性随name进行更换,而使得链接样式更换;
  }
function setCookie(value)  //保存cookie,这步记得做,不然等你刷新页面或重新进入,样式会恢复到默认样式
{
var name="skinp";
    var Days = 30; //定义天数
    var exp  = new Date();    //new Date("December 31, 9998"); //获取现在时间
        exp.setTime(exp.getTime() + Days*24*60*60*1000); //得到截止时间
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); //失效的时间即cookie保存时间
 
} </script
二、链接样式代码,位于<head></head>之间
<link href="images/skin1/index.css" rel="stylesheet" type="text/css" id="cssfile" /> //link代码内需有id,更换样式需要用到
<link href="images/index.css" type="text/css" rel="stylesheet"> //可以同时链接其它css,此样式不变
三、网站显示部分代码,位于<body></body>之间
皮肤:
<select name="sel" onchange="changestyle(this.options[this.options.selectedIndex].value);setCookie(this.options[this.options.selectedIndex].value);window.location.reload();"> //更换样式选项,自动触发onchange事件–调用3个js函数:changestyle(参数)、setCookie(参数)、刷新页面;
  <option value="skin1" selected>蓝色</option> //被选中样式;
  <option value="skin2" >红色<
span class="HTML_TAG"></option>
  <option value="skin3" >黑色</option>
  <option value="skin4" >绿色</option>
  <option value="skin5" >黄色</option>
 
</select>

本博文章基本上属于原创或收集整理,都是心血结晶。
欢迎转载分享,转载请注明出处,谢谢!
本文地址:网站样式风格更换代码解读[风格切换]

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部