掌握网页换肤技巧，打造个性化浏览体验

人亦已歌

掌握网页换肤技巧，打造个性化浏览体验

引子

网页换肤是一门老技术了，老的现在都不怎么流行了。但是，有时候有些客户就是想要这个换肤功能。于是就实践做了一下网页换肤，方法有很多，下面先对一种方法做一下简单的介绍。

网页换肤的基本原理

基本原理很简单，就是使用 JS 切换对应的 CSS 样式表。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项。 那么基本工作流程就出来了：访问网页——JS 读取 Cookie ——如果没有，使用默认皮肤——如果有，使用指定皮肤；用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie 保存。

网页换肤事先需要的准备

首先你可能要准备多套 CSS 样式表文件，当点击换肤按钮的是，使用 JS 来切换对应的 CSS 样式表。之后，就是在网页上增加一个 ul li 列表，用 CSS 修饰一下做成换肤选项。例如：

下面我们就来看具体功能代码。

实现点击切换对应 CSS 功能

html代码，包括点击和下拉2中形式，如下：

2. 请选择下面的下拉菜单测试换肤效果
3. <a href=# onclick="changecss('css.css')">css.css</a>
4. <a href=# onclick="changecss('css1.css')">css1.css</a>
5. <a href=# onclick="changecss('css2.css')">css2.css</a>
6. <a href=# onclick="changecss('css3.css')">css3.css</a>
7. <br>
8. <select onchange="changecss(this.value)">
9. <option>选择样式单文件</option>
10. <script language="javascript">
11. var csss=new Array();
12. csss[0]="css.css";
13. csss[1]="css1.css";
14. csss[2]="css2.css";
15. csss[3]="css3.css";
16. var i;
17. for(i=0;i<4;i++)
18. if(thisskin==csss[i])
19. document.write("<option value=""+csss[i]+"" selected>"+csss[i]+"样式单文件</option>");
20. else
21. document.write("<option value=""+csss[i]+"">"+csss[i]+"样式单文件</option>");
22. </script>
23. </select>

复制代码

js代码如下：

2. function SetCookie(name,value){
3. var argv=SetCookie.arguments;
4. var argc=SetCookie.arguments.length;
5. var expires=(2<argc)?argv[2]:null;
6. var path=(3<argc)?argv[3]:null;
7. var domain=(4<argc)?argv[4]:null;
8. var secure=(5<argc)?argv[5]:false;
9. document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");
10. }
11. function GetCookie(Name) {
12. var search = Name + "=";
13. var returnvalue = "";
14. if (document.cookie.length > 0) {
15. offset = document.cookie.indexOf(search);
16. if (offset != -1) {
17. offset += search.length;
18. end = document.cookie.indexOf(";", offset);
19. if (end == -1)
20. end = document.cookie.length;
21. returnvalue=unescape(document.cookie.substring(offset,end));
22. }
23. }
24. return returnvalue;
25. }
26. var thisskin;
27. thisskin=GetCookie("nowskin");
28. if(thisskin!="")
29. skin.href=thisskin;
30. else
31. skin.href="css.css";
32. function changecss(url){
33. if(url!=""){
34. skin.href=url;
35. var expdate=new Date();
36. expdate.setTime(expdate.getTime()+(24*60*60*1000*30));
37. //expdate=null;
38. //以下设置COOKIES时间为1年,自己随便设置该时间..
39. SetCookie("nowskin",url,expdate,"/",null,false);
40. }
41. }

复制代码

案例效果预览