用javascript来实现页面的换肤功能
Submitted by footya on 2007, April 9, 11:42 AM. AJAX/Javascript
js实现换肤功能的实现主要是通过利用js控制CSS来实现的。大致的实现原理是这样的,
1、先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的DIV元素有一个基本的框架结构。
2、再定义一系列的样式color1.css,color2.css……用来确定DIV元素的背景颜色,边框颜色等等。
3、用JS函数来决定调用哪个样式,并把调进来的样式写进cookie,这样就可以达功能。
例如:我们的页面结构如下:
![None.gif](/Images/OutliningIndicators/None.gif)
2
![None.gif](/Images/OutliningIndicators/None.gif)
3
![None.gif](/Images/OutliningIndicators/None.gif)
4
![None.gif](/Images/OutliningIndicators/None.gif)
5
![None.gif](/Images/OutliningIndicators/None.gif)
6
![None.gif](/Images/OutliningIndicators/None.gif)
7
![None.gif](/Images/OutliningIndicators/None.gif)
8
![None.gif](/Images/OutliningIndicators/None.gif)
9
![None.gif](/Images/OutliningIndicators/None.gif)
10
![None.gif](/Images/OutliningIndicators/None.gif)
11
![None.gif](/Images/OutliningIndicators/None.gif)
12
![None.gif](/Images/OutliningIndicators/None.gif)
13
![None.gif](/Images/OutliningIndicators/None.gif)
14
![None.gif](/Images/OutliningIndicators/None.gif)
-------------------------------------------
页面中这两行比较关键:
<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 οnclick="changeStyle(1)">样式1</a>
<a οnclick="changeStyle(2)">样式2</a>
--------------------------------------------
实现这些功能的js函数:
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
2
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
3
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
4
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
5
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
6
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
7
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
8
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
10
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
11
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
12
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
13
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
14
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
15
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
16
![None.gif](/Images/OutliningIndicators/None.gif)
17
![None.gif](/Images/OutliningIndicators/None.gif)
18
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
19
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
20
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
21
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
22
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
23
![None.gif](/Images/OutliningIndicators/None.gif)
24
![None.gif](/Images/OutliningIndicators/None.gif)
25
![None.gif](/Images/OutliningIndicators/None.gif)