《CSS标准设计》系列之 CSS样式切换技巧

来源：互联网发布：java中的泛型是什么编辑：程序博客网时间：2024/05/16 12:48

CSS样式切换技巧

样式与数据分离所带来的不只是符合标准这样的简单，样式既然与数据分离那么样式的切换则变得理所当然的了！但是网上这样的中文教程实在是太少了！所以我收集了一部分中外网站已经实现的技术资料整理出来供网友参考。

首先要具备不同内容的CSS文件（最好每个文件代表一种样式，或是代表需要作出变动的部分）。这里以三个为例：

第一个是背景为红色的CSS文件（red.css）CSS中的内容为：

body {background-color:red;}

第二个是背景为绿色的CSS文件（green.css）CSS中的内容为：
body {background-color:green;}

第三个是背景为黄色的CSS文件（yellow.css）CSS中的内容为：
body {background-color:yellow;}

然后在xthml文件中加入这三个CSS的链接

<link rel="alternate stylesheet" href="red.css" type="text/css" title="red" media="screen, projection"/>
<link rel="stylesheet" href="green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>

这三个中除了title不一样外还有一个地方有所不同，那就是REL。第一个与第三个都是alternate stylesheet只有第二个是stylesheet。这第二个就是当然样式。

在链接下面再导入一个JS文件，用来控制这个样式切换

function setActiveStyleSheet(title) {  var i, a, main;  if (title) {  for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {  if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {  a.disabled = true;  if(a.getAttribute('title') == title) a.disabled = false;  }  }  }  }  function getActiveStyleSheet() {  var i, a;  for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {  if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('title');  }  return null;}

在合适的地方加入三个切换按钮

<a href="javascript :void()" onclick="setActiveStyleSheet('red'); return false;" title="红色样式"></a>
<a href="javascript :void()" onclick="setActiveStyleSheet('green'); return false;" title="绿色样式"></a>
<a href="javascript :void()" onclick="setActiveStyleSheet('yellow'); return false;" title="黄色样式"></a>
<a href="javascript :void()" onclick="setActiveStyleSheet('none'); return false;" title="没有样式"></a>

好了发布试试点那三个切换链接！是不是已经切换了样式？

补遗：带有记忆功能的JS文档

function setActiveStyleSheet(title) {var i, a, main;for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {a.disabled = true;if(a.getAttribute("title") == title) a.disabled = false;}}}function getActiveStyleSheet() {var i, a;for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title") && !a.disabled)return a.getAttribute("title");}return null;}function getPreferredStyleSheet() {var i, a;for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {if(a.getAttribute("rel").indexOf("style") != -1&& a.getAttribute("rel").indexOf("alt") == -1&& a.getAttribute("title")) return a.getAttribute("title");}return null;}function createCookie(name,value,days) {if (days) {var date = new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires = "; expires="+date.toGMTString();}else expires = "";document.cookie = name+"="+value+expires+";path=/";}function readCookie(name) {var nameEQ = name + "=";var ca = document.cookie.split(';');for(var i=0;i < ca.length;i++) {var c = ca[i];while (c.charAt(0)==' ') c = c.substring(1,c.length);if (c.indexOf(nameEQ) == 0) returnc.substring(nameEQ.length,c.length);}return null;}window.onload = function(e) {var cookie = readCookie("style");var title = cookie ? cookie :getPreferredStyleSheet();setActiveStyleSheet(title);}window.onunload = function(e) {var title = getActiveStyleSheet();createCookie("style", title, 365);}var cookie = readCookie("style");var title = cookie ? cookie :getPreferredStyleSheet();setActiveStyleSheet(title);

Andy JOIN

原文：
www.lifeinbox.com/blog/more.asp?name=join&id=359

[这消息被小毅编辑过(最后编辑时间2005-10-26 18:56:26)]

喬恩品牌策劃 Join Brand Tactic
只要我还活着就不会放弃理想

Blueidea Web Team
Team Member

yuioocom

初级用户
积分：41
发贴：113
来自：
注册：2004-05-21

发表于 2005-01-04 01:33:30

举报不良信息

很不错

但是这样连接的话是不是三个样式表都已经下载了呢？如果叶面比较大，而且用户不准备切换样式表，那其余的样式表下载不久浪费了带宽么。

个人认为，比较好的样式表切换还是得用网站程序来做，比如asp、php，可以把用户最后选定的样式表保存在用户电脑的cookie中。这样用户下次访问时就还是上次的样式表了。而且不用一次连接多个样式表浪费带宽，不是么？

蓝色理想以前主页上有一个“我的配色”，虽然似乎不是通过更改样式表实现的，但是我觉得原理就应该是这样做的了。

当然楼主的程序对于小型一些的站点还是非常有用的了。

我的Blog，欢迎大家做客
www.mltr.cn/scyui/ garu

终级用户
积分：2022
发贴：1333
来自：伟人故里
注册：2003-10-19

发表于 2005-01-04 09:12:48

举报不良信息

好文章～

清心自赏。

小毅

版主
现任版主
积分：880
发贴：717
来自：金陵石头城
注册：2003-04-23

发表于 2005-01-04 09:50:34

举报不良信息

yuioocom在上个帖子中说

引用:
很不错

但是这样连接的话是不是三个样式表都已经下载了呢？如果叶面比较大，而且用户不准备切换样式表，那其余的样式表下载不久浪费了带宽么。

个人认为，比较好的样式表切换还是得用网站程序来做，比如asp、php，可以把用户最后选定的样式表保存在用户电脑的cookie中。这样用户下次访问时就还是上次的样式表了。而且不用一次连接多个样式表浪费带宽，不是么？

蓝色理想以前主页上有一个“我的配色”，虽然似乎不是通过更改样式表实现的，但是我觉得原理就应该是这样做的了。

当然楼主的程序对于小型一些的站点还是非常有用的了。

你讲得没错！这个JS文件的确不支持样式记忆功能！但是对于一部分没有后台程序网页还是比较方便的，这个部分可以变形为字体大小变化，这样可以方便一部分视力不好的人看网页内容。

还有，这个方式只会加载一个样式其它样式是在点击后加载进来的！所以不用担心这个会加大文件量！

喬恩品牌策劃 Join Brand Tactic
只要我还活着就不会放弃理想

Blueidea Web Team
Team Member

不含ppa

终级用户
积分：2488
发贴：3281
来自：冥王星
注册：2003-08-23

发表于 2005-01-04 10:04:11

举报不良信息

为什么不使用外部传值来加载CSS?

例如 XXX.htm?css=green

1 4R3 T3H H4X0R!小毅

版主
现任版主
积分：880
发贴：717
来自：金陵石头城
注册：2003-04-23

发表于 2005-01-04 10:21:44

举报不良信息

不含ppa在上个帖子中说

引用:
为什么不使用外部传值来加载CSS?

例如 XXX.htm?css=green

因为我们没有ASP这样的程序来支持！

喬恩品牌策劃 Join Brand Tactic
只要我还活着就不会放弃理想

Blueidea Web Team
Team Member

不含ppa

终级用户
积分：2488
发贴：3281
来自：冥王星
注册：2003-08-23

发表于 2005-01-04 11:13:27

举报不良信息

小毅在上个帖子中说

引用:
不含ppa在上个帖子中说
引用:
为什么不使用外部传值来加载CSS?

例如 XXX.htm?css=green

因为我们没有ASP这样的程序来支持！

我的意思是说，JS接收外部传值，这样的话，根据传的值来判断加载哪一个CSS,这样，就不需要把所有CSS载入

1 4R3 T3H H4X0R!xuxu2004

终级用户
积分：2709
发贴：825
来自：北京
注册：2004-02-29

发表于 2005-01-04 13:53:04

xuxu2004 的 oicq 是57456925,查看 57456925 的资料

举报不良信息

收藏了，研究一下，不错的贴子

没有最好,只有更好! YrA5lala

初级用户
积分：46
发贴：30
来自：
注册：2004-05-20

发表于 2005-01-04 16:31:26

举报不良信息

yuioocom在上个帖子中说

引用:
很不错

但是这样连接的话是不是三个样式表都已经下载了呢？如果叶面比较大，而且用户不准备切换样式表，那其余的样式表下载不久浪费了带宽么。

个人认为，比较好的样式表切换还是得用网站程序来做，比如asp、php，可以把用户最后选定的样式表保存在用户电脑的cookie中。这样用户下次访问时就还是上次的样式表了。而且不用一次连接多个样式表浪费带宽，不是么？

蓝色理想以前主页上有一个“我的配色”，虽然似乎不是通过更改样式表实现的，但是我觉得原理就应该是这样做的了。

当然楼主的程序对于小型一些的站点还是非常有用的了。

这个建议非常的不错~~在用户第二次登陆你的网站的时候做一些判断,如果他的机器上次用了某个css文件.那么这次就还用这个...恩恩~~不错. 淡獭

初级用户
积分：1
发贴：11
来自：
注册：2002-08-15

发表于 2005-01-05 23:54:45

举报不良信息

小毅在上个帖子中说

引用:
不含ppa在上个帖子中说
引用:
为什么不使用外部传值来加载CSS?

例如 XXX.htm?css=green

因为我们没有ASP这样的程序来支持！

vivi.cgshow.com/
就是传值``虽然简单了点```

《涅磐经》第十九卷：“八大地狱之最,称为无间地狱,为无间断遭受大苦之意,故有此名”【无间】“万恶之地，在无间行走的人，必具非常潜能!” 淡獭

初级用户
积分：1
发贴：11
来自：
注册：2002-08-15

发表于 2005-01-06 00:06:35

举报不良信息

以下是源代码：

<%css = Request("css")if css = "" then css = "index.css"%><style type="text/css" title="currentStyle">@import "css/public.css";@import "css/<%=css%>";</style><div id="quickNav"><h3><a href="index.asp" title="首页" class="n1"><span>INDEX</span></a></h3><h3><a href="index.asp?css=work.css" title="工作" class="n2"><span>WORK</span></a></h3><h3><a href="index.asp?css=services.css" title="服务" class="n3"><span>SERVICES</span></a></h3><h3><a href="index.asp?css=contact.css" title="联系" class="n4"><span>CONTACT</span></a></h3></div>

《涅磐经》第十九卷：“八大地狱之最,称为无间地狱,为无间断遭受大苦之意,故有此名”【无间】“万恶之地，在无间行走的人，必具非常潜能!” mbreeze

初级用户
积分：9
发贴：4
来自：
注册：2005-01-12

发表于 2005-01-12 06:09:45

举报不良信息

收获很大哦 zxp0571

初级用户
积分：0
发贴：5
来自：
注册：2005-01-12

发表于 2005-01-12 19:56:21

举报不良信息

大家看看Mozilla Thunderbird的帮助主页
texturizer.net/thunderbird/

<link rel="stylesheet" type="text/css" media="screen,projection" href="../mozilla.org/css/style.css" /><link rel="stylesheet" type="text/css" href="http://texturizer.net/mozilla.org/css/print.css" media="print" /><link rel="alternate stylesheet" title="Locked Menu" media="screen,projection" href="../mozilla.org/css/lockedmenu.css" type="text/css" /><link rel="alternate stylesheet" title="Classic" media="screen,projection" href="../mozilla.org/css/classic.css" type="text/css" /><link rel="alternate stylesheet" title="Classic with Locked Menu" media="screen,projection" href="../mozilla.org/css/classic-lockedmenu.css" type="text/css" /><script src="../mozilla.org/javascript/styleswitcher.js" type="text/javascript"></script>

styleswitcher.js内容

// help function to get the site idfunction getID() {var id = document.location.pathname;var i=0;for(i=id.length - 1; i>0; i--) {if(id[i]=='/')break;}//alert(id);id = replace(id.substring(0,i+1),"extensions/","");id = replace(id, "themes/", "");id = replace(id, "downloads/", "");return "style-" + id;}function replace(string,text,by) {// Replaces text with by in string    var strLength = string.length, txtLength = text.length;    if ((strLength == 0) || (txtLength == 0)) return string;    var i = string.indexOf(text);    if ((!i) && (text != string.substring(0,txtLength))) return string;    if (i == -1) return string;    var newstr = string.substring(0,i) + by;    if (i+txtLength < strLength)        newstr += replace(string.substring(i+txtLength,strLength),text,by);    return newstr;}function setActiveStyleSheet(title) {  var i, a, main;  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {      a.disabled = true;      if(a.getAttribute("title") == title) {      a.disabled = false;      a.disabled = true;      a.disabled = false;      }    }  }}function getActiveStyleSheet() {  var i, a;  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");  }  return null;}function getPreferredStyleSheet() {  var i, a;  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {    if(a.getAttribute("rel").indexOf("style") != -1       && a.getAttribute("rel").indexOf("alt") == -1       && a.getAttribute("title")       ) return a.getAttribute("title");  }  return null;}function createCookie(name,value,days) {  if (days) {    var date = new Date();    date.setTime(date.getTime()+(days*24*60*60*1000));    var expires = "; expires="+date.toGMTString();  }  else expires = "";  document.cookie = name+"="+value+expires+"; path=/";}function readCookie(name) {  var nameEQ = name + "=";  var ca = document.cookie.split(';');  for(var i=0;i < ca.length;i++) {    var c = ca[i];    while (c.charAt(0)==' ') c = c.substring(1,c.length);    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);  }  return null;}window.onload = function(e) {  var cookie = readCookie(siteid);  var title = cookie ? cookie : getPreferredStyleSheet();  setActiveStyleSheet(title);}window.onunload = function(e) {  var title = getActiveStyleSheet();  createCookie(siteid, title, 365);}var cookie = readCookie(siteid);var title = cookie ? cookie : getPreferredStyleSheet();var siteid = getID();setActiveStyleSheet(title);

jojobear

初级用户
积分：8
发贴：11
来自：厦门
注册：2004-12-13

发表于 2005-01-14 10:16:44