开发html5页面切换,<HTML5程序开发范例宝典（韩旭著）>读书笔记之页面风格切换实例...

这个demo是可运行的，html和css都比较简单，主要是js部分会稍微复杂一点。 另外一定要确保引入的路径没有问题，比如我的文件是这样放的：

html:

样式一

样式二

测试按钮

function writeCookie(cssPath){

//设置cookie的值为30天

var today=new Date();

var expires=new Date();

expires.setTime(today.getTime()+1000*60*60*24*30);//有效期为30天

var str="cssPath="+cssPath+";expires="+expires.toGMTString()+";";

document.cookie=str;

}

function readCookie(cookieName){

var search=cookieName+"=";

if(document.cookie.length>0){

offset=document.cookie.indexOf(search);

if(offset != -1){

offset+=search.length;

end=document.cookie.indexOf(";",offset);

if(end==-1){

end=document.cookie.length;

return unescape(document.cookie.substring(offset,end));

}

}

}

}

//ifCookie(),初始化页面风格

function ifCookie(){

if(readCookie("cssPath")==undefined){//当标记网页style的cookie不存在

writeCookie("css/style1.css");

}

document.getElementById("myCss").href=readCookie("cssPath");

}

//change(),用于改变页面的整体风格

function change(myCss,cssPath){

writeCookie(cssPath);

document.getElementById(myCss).href=readCookie("cssPath");

}

style1.css

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body

{

background-color:#fff;

font-size:18px;

font-family:"Arial","Tahoma","微软雅黑","雅黑";

line-height:18px;

padding:0px;

margin:0px;

text-align:center;

}

button

{

font-family:"Arial","Tahoma","微软雅黑","雅黑";

border:0px;

vertical-align:middle;

margin:8px;

line-height:18px;

font-size:18px;

}

.testBtn{

width:145px;

height:34px;

line-height:22px;

font-size:22px;

color:#959595;

padding-bottom:4px;

}

style2.css:

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body

{

background-color:#fff;

font-size:18px;

font-family:"Arial","Tahoma","微软雅黑","雅黑";

line-height:18px;

padding:0px;

margin:0px;

text-align:center;

}

button

{

font-family:"Arial","Tahoma","微软雅黑","雅黑";

border:0px;

vertical-align:middle;

margin:8px;

line-height:18px;

font-size:18px;

}

.testBtn{

width:144px;

height:42px;

line-height:18px;

font-size:18px;

color:#ff6000;

padding-bottom:4px;

}