《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的链接 这三个中除了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; } 在合适的地方加入三个切换按钮 好了发布试试点那三个切换链接！是不是已经切换了样式？ 补遗：带有记忆功能的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        举报不良信息 很不错 但是这样连接的话是不是三个样式表都已经下载了呢？如果叶面比较大，而且用户不准备切换样式表，那其余的样式表下载不久浪费了带宽么。 个人认为，比较好的样式表切换还是得用网站程序来做，比如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         举报不良信息 收藏了，研究一下，不错的贴子 没有最好,只有更好!
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" %> INDEX WORK SERVICES CONTACT 《涅磐经》第十九卷：“八大地狱之最,称为无间地狱,为无间断遭受大苦之意,故有此名”【无间】“万恶之地，在无间行走的人，必具非常潜能!”
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/ 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         举报不良信息 听说用dom实现会很简单，不知道那位大侠会。
gogocome 终级用户 积分：3020 发贴：2347 来自：两面之城 注册：2004-07-15	发表于 2005-01-14 14:36:06         举报不良信息 我痛恨我的懒，把我害得好惨
uploadingl 初级用户 积分：27 发贴：21 来自： 注册：2005-08-01	发表于 2005-08-02 15:54:32         举报不良信息 马上就要用到这个，没想到还是比较麻烦的。 谢谢 寒鸦
eLore 高级用户 积分：164 发贴：83 来自： 注册：2005-04-25	发表于 2005-08-08 11:55:04        举报不良信息 确实不错 多娇引折腰 重构之美QQ群(XHTML+CSS+ECMAScript):5824806
base5 初级用户 积分：88 发贴：58 来自： 注册：2004-12-26	发表于 2005-10-11 11:19:34        举报不良信息 html? 传值其实不用asp/jsp/php支持的 用js得到document.location.url 然后分析得到的url，就可以得到传进来的值了。
onlycolor 初级用户 积分：149 发贴：116 来自：CN -> GD -> ST 注册：2003-05-22	发表于 2005-10-11 13:58:10         举报不良信息 很不错文章，谢谢小毅。^_^ 但加了记忆功能的JS代码后怎么链接显示为javascript :void()？？？ Design from the heart.
cnbruce 布鲁斯狼 现任版主 积分：11557 发贴：6103 来自：扬州城 注册：2003-07-27	发表于 2005-10-13 08:48:16         举报不良信息 要有记忆，就需要使用到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         举报不良信息 cnbruce在上个帖子中说 引用: 要有记忆，就需要使用到Cookie，将当前浏览者设置的样式生成Cookie文件保存在客户机器上，下次访问判断即可 cnbruce.com/test/css/ 查看源代码即可知，不过不是标准页 还是这个方法简单实用，现在还有没有其他更好的方法了？