用javascript来实现页面的换肤功能

js实现换肤功能的实现主要是通过利用js控制CSS来实现的。大致的实现原理是这样的，

1、先定义一个页面基本样式style.css来确定div的宽高等属性，使得整个页面的DIV元素有一个基本的框架结构。

2、再定义一系列的样式color1.css,color2.css……用来确定DIV元素的背景颜色，边框颜色等等。

3、用JS函数来决定调用哪个样式，并把调进来的样式写进cookie，这样就可以达功能。

例如：我们的页面结构如下：

1

<div id="header"></div>

2

<div id="contant"></div>

3

<div id="footer"></div>

4

-------------------------------------------

5

style.css

6

#header{width:700px;height:120px; margin:0px auto;}

7

#contant{width:700px;height:400px; margin:0px auto;}

8

#footer{width:700px;height:200px; margin:0px auto;}

9

-------------------------------------------

10

color1.css

11

#header,#contant,#footer{boder:1px solid #dfaf33; background-color:#eeeeee;}

12

-------------------------------------------

13

color2.css

14

#header,#contant,#footer{boder:1px solid #ff00ea; background-color:#ff3322;}

-------------------------------------------

页面中这两行比较关键:

<link href="css/style.css" rel="stylesheet" type="text/css" />

<link href="css/color1.css" id="color" rel="stylesheet" type="text/css" />

第1行引入页面的基本样式,第2行引入一个颜色样式color2.css给页面一个初始化颜色,第2行中有一个id="color"这个很关键它为JS函数提供了

接口，js通过这个id改变href的值来决定引入那个颜色样式，从而达到改变页面颜色样式的目的。

改变颜色样式的按钮我们可以用文字链接来实现，也可以用其他元素来实现。

<a onclick="changeStyle(1)">样式1</a>

<a onclick="changeStyle(2)">样式2</a>

--------------------------------------------

实现这些功能的js函数：

1

function getObject(elementId) { //获取指定id的object

2

if (document.getElementById) {

3

return document.getElementById(elementId);

4

} else if (document.all) {

5

return document.all[elementId];

6

} else if (document.layers) {

7

return document.layers[elementId];

8

}

9

}

10

function changeStyle(id){//切换样式

11

var stylesheet=getObject("color").href="css/color"+id+".css";

12

document.cookie="stylesheet="+escape(stylesheet);//写入Cookie

13

//alert(document.cookie);

14

//alert(stylesheet);

15

}

16


17


18

function initStyle(){ //初始化样式，如果cookie存在样式，则加载cookie样式，否则加载默认样式

19

if(/stylesheet=([^;]+)/.test(document.cookie))//判断是否存在cookie.

20

getObject("color").href=unescape(RegExp.$1);

21

//alert(/stylesheet=([^;]+)/.test(document.cookie));

22

}

23

initStyle();

24


出自：http://www.cnblogs.com/38809972/articles/952115.html