网站样式风格更换代码解读[风格切换]
网站通过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>
span class="HTML_TAG"></option>
<option value="skin3" >黑色</option>
<option value="skin4" >绿色</option>
<option value="skin5" >黄色</option>
</select>
本博文章基本上属于原创或收集整理，都是心血结晶。
欢迎转载分享，转载请注明出处，谢谢！
本文地址：网站样式风格更换代码解读[风格切换]