网站换肤设计用js+css切换样式表实现
css做到了表现与内容的分离，使得网站改版比以往更加方便容易。css这种从本质上将样式从内容分离开来的特性，使我们联想到了另一个应用，就是可否通过css的改变，实现网站的换肤功能呢?事实上这个想法已经得到了实现，而且在网上有着众多的应用，最典型的应用就是MSN网站的换肤功能。MSN网站于2005年推出了符合Web标准的新版网站，在推出的同时，大家就注意到了MSN新网站的左上角出现了一个Classic style和Bluestyle两个明显的按钮，这个就是MSN的网站换肤功能，通过点击两个链接，能够切换MSN网站的两种风格，用起来很方便，也非常有特点。
实际上MSN网站的换肤功能是通过JavaScript脚本实现的，JavaScript脚本能够对网页中的每一个对象进行交互脚本的编写，在这里我们将尝试使用JavaScript制作一个简单的换肤功能。在开始实现换肤前，我们先准备xhtml页面：
- <div id="header">
- <h1>CSS 2.0的优势</h1>
- </div>
- <div id="nav">
- […]
- </div>
- <div id="content">
- […]
- </div>
因为篇幅关系，略掉网页中的文字部分，大家可以自行填充，基本xhtml结构由#header、#nav及#content三部分，我们为网页准备两个样式表文件，首先是blue.css
- /∗ CSS Document ∗/
- body {
- margin:0;
- padding:0;
- }
- #header {
- padding:10px;
- background-color:#0d3460;
- color:#fff;
- font-family:Arial;
- }
- h1 {
- font-size:20px;
- width:760px;
- margin:0 auto;
- }
- #content {
- width:760px;
- margin:0 auto;
- font-size:12px;
- color:#444;
- padding:10px;
- line-height:180%;
- }
- #nav {
- text-align:center;
- margin:0 auto;
- padding:10px 0;
- background-color:#eee;
- }
- input {
- font-size:12px;
- }
blue.css是第一个样式文件，用于将页面设置为内容从上至下排列，具有深蓝色头部的样式。紧接着准备第二个样式文件red.css
- /∗ CSS Document ∗/
- body {
- margin:0;
- padding:0;
- }
- #header {
- padding:10px;
- background-color:#ce0b0b;
- color:#fff;
- font-family:Arial;
- float:left;
- height:500px;
- }
- h1 {
- font-size:20px;
- }
- #content {
- font-size:12px;
- color:#444;
- padding:20px;
- line-height:180%;
- }
- #nav {
- text-align:center;
- padding:10px;
- background-color:#eee;
- float:left;
- height:500px;
- width:100px;
- }
- input {
- font-size:12px;
- margin-top:20px;
- }
red.css文件将能够使页面使用红色风格，并改变排列顺序为左右排列，我们的两个样式文件就编写出来了，我们的目标是使网页能够切换这两个不同样式。为此首先为网页引入blue.css作为默认样式：
<link href="style/blue.css" rel="stylesheet" type="text/css" id="cssfile" />
我们在网页的<head></head>之间引入了link对象用于链接blue.css样式表文件，大家可能注意到了，这里我们为元素link添加了id名为cssfile。link对象有了id，我们就可以在JavaScript中使用DOM方法访问这个对象，并改变其属性，因此开始编写JavaScript脚本，同样，JavaScript脚本也放置在<head></head>之间。
- <script>
- function changeStyle(name){
- css=document.getElementById("cssfile");
- css.href=name+".css";
- }
- </script>
JavaScript脚本非常简单，我们编写函数changeStyle，并使用name作为函数，然后使用document.getElementById("cssfile");来找到link对象，并在下一行代码将link对象的href值替换为name+".css";，也就是说如果name="red"，那么link对象的href值将变为red.css。有了这样一段脚本，我们就可以准备两个切换样式用的按钮了。我们在id为nav的div之放入两个按钮。
- <div id="nav">
- <input type="button" value="经典蓝" onclick="changeStyle('style/blue');"/>
- <input type="button" value="宝石红" onclick="changeStyle('style/red')";/>
- </div>
在点击"经典蓝"按钮时，将blue参数带入changeStyle函数，刚才编写的JavaScript脚本将link对象的href切换为blue.css，同样当点击宝石红时，脚本将切换到red.css。看看是不是达到了目的。
这样，通过JavaScript进行网页样式切换的功能就实现了，非常简单实用，无论对简单的切换实例，还是大型的网站应用都同样有效。不过JavaScript也有自己的局限性，JavaScript仅仅是一个客户端脚本，没有办法完成非常复杂的交互更功能，例如无法通过cookie来记录用户的设置，当用户刷新页面时又会恢复到默认样式，不过JavaScript作到了快捷简单，同样，如果需要样式记录或其它功能，我们可以通过编写后台脚本PHP或ASP等来实现，原理是一样的，只需要替换网页的样式表链接就可以做到。
原文地址：http://www.35ui.cn/post/20100628603.html 标签：html网页培训班网页美工培训班做网站个人网站栏目策划方案北京网页优化培训做网页常用代码上一条： 网站换肤技术网页皮肤设计修改
下一条： 欧美国家的禁忌颜色大全
