使用 JS 切换对应的 CSS 样式表。例如hao123首页的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项。
基本流程如下:
上面是使用流程图来描述下,自从工作以来很小画这样的流程图 如果流程图画错了或者画的不够好 请大家原谅!
先来看看效果图吧!
我只是做个demo 来实现这样一个效果!假如页面上一进来的时候 有这么四个按钮 分别代表不同的样式 当我鼠标点击不同的按钮时候 切换不同的css文件 且切换时候记录cookie里面去,当我们刷新页面或者关闭网页 重新打开 由于cookie的存在 所以还是关闭前的css样式 这样就实现了简单的网页换肤功能效果 基本的原理就是这些!
了解cookie及HTML5中sessionStorage和localStorage
首先我们来了解下cookie是干什么用的?简单讲 cookie作用是客户端存储数据。也就是本地存储。具体的了解可以看我之前的一篇关于cookie的博客。深入了解cookie
讲到cookie,我们再来简单的来了解下HTML5中新增了2个本地存储sessionStorage和localStorage. sessionStorage、 localStorage、cookie都是在
代码
default.css 代码如下:
@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#00C;}
p{color:#006;}
orange.css代码如下:
@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#C60;}
p{color:#C33;}
green.css代码如下:
@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#060;}
p{color:#060;}
red.css代码如下:
@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#F00;}
p{color:#F00;}