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

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) return
c.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  按此观看yuioocom的个人资料 按此发邮件给yuioocom 发送悄悄话给yuioocom 搜索yuioocom的所有帖子 引用这个帖子回复  举报不良信息
很不错

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

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

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

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


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

终级用户
积分:2022
发贴:1333
来自:伟人故里
注册:2003-10-19
 发表于 2005-01-04 09:12:48  按此观看garu的个人资料 按此发邮件给garu 访问garu的主页 发送悄悄话给garu 搜索garu的所有帖子 引用这个帖子回复  举报不良信息
好文章~


清心自赏。

小毅

版主
现任版主
积分: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  按此观看不含ppa的个人资料 按此发邮件给不含ppa 发送悄悄话给不含ppa 搜索不含ppa的所有帖子 引用这个帖子回复  举报不良信息
为什么不使用外部传值来加载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的个人资料 按此发邮件给不含ppa 发送悄悄话给不含ppa 搜索不含ppa的所有帖子 引用这个帖子回复  举报不良信息
小毅在上个帖子中说
引用:
不含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的个人资料 按此发邮件给xuxu2004 xuxu2004 的 oicq 是57456925,查看 57456925 的资料 发送悄悄话给xuxu2004 搜索xuxu2004的所有帖子 引用这个帖子回复  举报不良信息
收藏了,研究一下,不错的贴子


没有最好,只有更好!
YrA5lala

初级用户
积分:46
发贴:30
来自:
注册:2004-05-20
 发表于 2005-01-04 16:31:26  按此观看YrA5lala的个人资料 按此发邮件给YrA5lala 发送悄悄话给YrA5lala 搜索YrA5lala的所有帖子 引用这个帖子回复  举报不良信息
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  按此观看mbreeze的个人资料 按此发邮件给mbreeze 发送悄悄话给mbreeze 搜索mbreeze的所有帖子 引用这个帖子回复  举报不良信息
收获很大哦
zxp0571

初级用户
积分:0
发贴:5
来自:
注册:2005-01-12
 发表于 2005-01-12 19:56:21  按此观看zxp0571的个人资料 按此发邮件给zxp0571 发送悄悄话给zxp0571 搜索zxp0571的所有帖子 引用这个帖子回复  举报不良信息
大家看看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 id

function 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  按此观看jojobear的个人资料 按此发邮件给jojobear 访问jojobear的主页 发送悄悄话给jojobear 搜索jojobear的所有帖子 引用这个帖子回复  举报不良信息
听说用dom实现会很简单,不知道那位大侠会。
gogocome

终级用户
积分:3020
发贴:2347
来自:两面之城
注册:2004-07-15
 发表于 2005-01-14 14:36:06  按此观看gogocome的个人资料 按此发邮件给gogocome 访问gogocome的主页 发送悄悄话给gogocome 搜索gogocome的所有帖子 引用这个帖子回复  举报不良信息
<link href="sty1.css" rel="stylesheet" type="text/css">
<script>
function changecss(i)
{
document.styleSheets(0).href = "sty"+i+".css";
}
</script>


我痛恨我的懒,把我害得好惨
uploadingl

初级用户
积分:27
发贴:21
来自:
注册:2005-08-01
 发表于 2005-08-02 15:54:32  按此观看uploadingl的个人资料 按此发邮件给uploadingl 访问uploadingl的主页 发送悄悄话给uploadingl 搜索uploadingl的所有帖子 引用这个帖子回复  举报不良信息
马上就要用到这个,没想到还是比较麻烦的。

谢谢


寒鸦
eLore

高级用户
积分:164
发贴:83
来自:
注册:2005-04-25
 发表于 2005-08-08 11:55:04  按此观看eLore的个人资料 按此发邮件给eLore 发送悄悄话给eLore 搜索eLore的所有帖子 引用这个帖子回复  举报不良信息
确实不错


多娇引折腰

重构之美QQ群(XHTML+CSS+ECMAScript):5824806
base5

初级用户
积分:88
发贴:58
来自:
注册:2004-12-26
 发表于 2005-10-11 11:19:34  按此观看base5的个人资料 按此发邮件给base5 发送悄悄话给base5 搜索base5的所有帖子 引用这个帖子回复  举报不良信息
html?
传值其实不用asp/jsp/php支持的

用js得到document.location.url
然后分析得到的url,就可以得到传进来的值了。
onlycolor

初级用户
积分:149
发贴:116
来自:CN -> GD -> ST
注册:2003-05-22
 发表于 2005-10-11 13:58:10  按此观看onlycolor的个人资料 按此发邮件给onlycolor onlycolor 的 oicq 是35675221,查看 35675221 的资料 发送悄悄话给onlycolor 搜索onlycolor的所有帖子 引用这个帖子回复  举报不良信息
很不错文章,谢谢小毅。^_^
但加了记忆功能的JS代码后怎么链接显示为javascript :void()???


Design from the heart.
cnbruce

布鲁斯狼
现任版主
积分:11557
发贴:6103
来自:扬州城
注册:2003-07-27
 发表于 2005-10-13 08:48:16  按此观看cnbruce的个人资料 按此发邮件给cnbruce 访问cnbruce的主页 发送悄悄话给cnbruce 搜索cnbruce的所有帖子 引用这个帖子回复  举报不良信息
要有记忆,就需要使用到Cookie,将当前浏览者设置的样式生成Cookie文件保存在客户机器上,下次访问判断即可

cnbruce.com/test/css/

查看源代码即可知,不过不是标准页


《DW 从基础到实践》

Blueidea Web Team
Moderator Of Blueidea Developer forum
zhting

初级用户
积分:7
发贴:8
来自:
注册:2004-09-21
 发表于 2005-10-26 16:51:39  按此观看zhting的个人资料 按此发邮件给zhting 访问zhting的主页 发送悄悄话给zhting 搜索zhting的所有帖子 引用这个帖子回复  举报不良信息
cnbruce在上个帖子中说
引用:
要有记忆,就需要使用到Cookie,将当前浏览者设置的样式生成Cookie文件保存在客户机器上,下次访问判断即可

cnbruce.com/test/css/

查看源代码即可知,不过不是标准页



还是这个方法简单实用,现在还有没有其他更好的方法了?
阅读更多
换一批

没有更多推荐了,返回首页