《CSS標準設計》系列之 CSS樣式切換技巧

原創 f1musicc 2020-06-22 00:46
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()" οnclick="setActiveStyleSheet('red'); return false;" title="紅色樣式"></a>
<a href="javascript :void()" οnclick="setActiveStyleSheet('green'); return false;" title="綠色樣式"></a>
<a href="javascript :void()" οnclick="setActiveStyleSheet('yellow'); return false;" title="黃色樣式"></a>
<a href="javascript :void()" οnclick="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
<script type="text/javascript"> writeTools('1', '2005-01-04 <FONT COLOR=#800080>01:33:30</font>', 'yuioocom', 'yuioocom', true, '', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1882735', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-01-04 01:33:30  按此觀看yuioocom的個人資料 按此發郵件給yuioocom 發送悄悄話給yuioocom 搜索yuioocom的所有帖子 引用這個帖子回覆  舉報不良信息
很不錯

但是這樣連接的話是不是三個樣式表都已經下載了呢？如果葉面比較大，而且用戶不準備切換樣式表，那其餘的樣式表下載不久浪費了帶寬麼。

個人認爲，比較好的樣式表切換還是得用網站程序來做，比如asp、php，可以把用戶最後選定的樣式表保存在用戶電腦的cookie中。這樣用戶下次訪問時就還是上次的樣式表了。而且不用一次連接多個樣式表浪費帶寬，不是麼？

藍色理想以前主頁上有一個“我的配色”，雖然似乎不是通過更改樣式表實現的，但是我覺得原理就應該是這樣做的了。

當然樓主的程序對於小型一些的站點還是非常有用的了。

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

終級用戶
積分：2022
發貼：1333
來自：偉人故里
註冊：2003-10-19
<script type="text/javascript"> writeTools('1', '2005-01-04 <FONT COLOR=#800080>09:12:48</font>', 'garu', 'garu', true, 'http://www.leaf5.com', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1882831', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-01-04 09:12:48  按此觀看garu的個人資料 按此發郵件給garu 訪問garu的主頁 發送悄悄話給garu 搜索garu的所有帖子 引用這個帖子回覆  舉報不良信息
好文章～

清心自賞。

小毅

版主
現任版主
積分：880
發貼：717
來自：金陵 石頭城
註冊：2003-04-23
<script type="text/javascript"> writeTools('1', '2005-01-04 <FONT COLOR=#800080>09:50:34</font>', '%D0%A1%D2%E3', '小毅', true, 'http://www.joinstu.com/', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1882890', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 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
<script type="text/javascript"> writeTools('1', '2005-01-04 <FONT COLOR=#800080>10:04:11</font>', '%B2%BB%BA%ACppa', '不含ppa', true, '', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1882908', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-01-04 10:04:11  按此觀看不含ppa的個人資料 按此發郵件給不含ppa 發送悄悄話給不含ppa 搜索不含ppa的所有帖子 引用這個帖子回覆  舉報不良信息
爲什麼不使用外部傳值來加載CSS?

例如 XXX.htm?css=green

1 4R3 T3H H4X0R!
小毅

版主
現任版主
積分：880
發貼：717
來自：金陵 石頭城
註冊：2003-04-23
<script type="text/javascript"> writeTools('1', '2005-01-04 <FONT COLOR=#800080>10:21:44</font>', '%D0%A1%D2%E3', '小毅', true, 'http://www.joinstu.com/', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1882922', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 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
<script type="text/javascript"> writeTools('1', '2005-01-04 <FONT COLOR=#800080>11:13:27</font>', '%B2%BB%BA%ACppa', '不含ppa', true, '', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1883029', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 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
<script type="text/javascript"> writeTools('1', '2005-01-04 <FONT COLOR=#800080>13:53:04</font>', 'xuxu2004', 'xuxu2004', true, '', '', '57456925', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1883258', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-01-04 13:53:04  按此觀看xuxu2004的個人資料 按此發郵件給xuxu2004 xuxu2004 的 oicq 是57456925,查看 57456925 的資料 發送悄悄話給xuxu2004 搜索xuxu2004的所有帖子 引用這個帖子回覆  舉報不良信息
收藏了，研究一下，不錯的貼子

沒有最好,只有更好!
YrA5lala

初級用戶
積分：46
發貼：30
來自：
註冊：2004-05-20
<script type="text/javascript"> writeTools('1', '2005-01-04 <FONT COLOR=#800080>16:31:26</font>', 'YrA5lala', 'YrA5lala', true, '', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1883548', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-01-04 16:31:26  按此觀看YrA5lala的個人資料 按此發郵件給YrA5lala 發送悄悄話給YrA5lala 搜索YrA5lala的所有帖子 引用這個帖子回覆  舉報不良信息
yuioocom在上個帖子中說
引用:
很不錯

但是這樣連接的話是不是三個樣式表都已經下載了呢？如果葉面比較大，而且用戶不準備切換樣式表，那其餘的樣式表下載不久浪費了帶寬麼。

個人認爲，比較好的樣式表切換還是得用網站程序來做，比如asp、php，可以把用戶最後選定的樣式表保存在用戶電腦的cookie中。這樣用戶下次訪問時就還是上次的樣式表了。而且不用一次連接多個樣式表浪費帶寬，不是麼？

藍色理想以前主頁上有一個“我的配色”，雖然似乎不是通過更改樣式表實現的，但是我覺得原理就應該是這樣做的了。

當然樓主的程序對於小型一些的站點還是非常有用的了。


這個建議非常的不錯~~在用戶第二次登陸你的網站的時候做一些判斷,如果他的機器上次用了某個css文件.那麼這次就還用這個...恩恩~~不錯.
淡獺

初級用戶
積分：1
發貼：11
來自：
註冊：2002-08-15
<script type="text/javascript"> writeTools('1', '2005-01-05 <FONT COLOR=#800080>23:54:45</font>', '%B5%AD%CC%A1', '淡獺', true, 'http://cgshow.com/', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1885321', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-01-05 23:54:45  按此觀看淡獺的個人資料 按此發郵件給淡獺 訪問淡獺的主頁 發送悄悄話給淡獺 搜索淡獺的所有帖子 引用這個帖子回覆  舉報不良信息
小毅在上個帖子中說
引用:
不含ppa在上個帖子中說
引用:
爲什麼不使用外部傳值來加載CSS?

例如 XXX.htm?css=green


因爲我們沒有ASP這樣的程序來支持！


vivi.cgshow.com/
就是傳值``雖然簡單了點```

《涅磐經》第十九卷：“八大地獄之最,稱爲無間地獄,爲無間斷遭受大苦之意,故有此名”【無間】“萬惡之地，在無間行走的人，必具非常潛能!”
淡獺

初級用戶
積分：1
發貼：11
來自：
註冊：2002-08-15
<script type="text/javascript"> writeTools('10', '2005-01-06 <FONT COLOR=#800080>00:06:35</font>', '%B5%AD%CC%A1', '淡獺', true, 'http://cgshow.com/', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1885328', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 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
<script type="text/javascript"> writeTools('1', '2005-01-12 <FONT COLOR=#800080>06:09:45</font>', 'mbreeze', 'mbreeze', true, '', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1891689', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-01-12 06:09:45  按此觀看mbreeze的個人資料 按此發郵件給mbreeze 發送悄悄話給mbreeze 搜索mbreeze的所有帖子 引用這個帖子回覆  舉報不良信息
收穫很大哦
zxp0571

初級用戶
積分：0
發貼：5
來自：
註冊：2005-01-12
<script type="text/javascript"> writeTools('1', '2005-01-12 <FONT COLOR=#800080>19:56:21</font>', 'zxp0571', 'zxp0571', true, '', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1892738', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 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
<script type="text/javascript"> writeTools('1', '2005-01-14 <FONT COLOR=#800080>10:16:44</font>', 'jojobear', 'jojobear', true, 'http://80ages.bigonghotel.com', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1894393', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-01-14 10:16:44  按此觀看jojobear的個人資料 按此發郵件給jojobear 訪問jojobear的主頁 發送悄悄話給jojobear 搜索jojobear的所有帖子 引用這個帖子回覆  舉報不良信息
聽說用dom實現會很簡單，不知道那位大俠會。
gogocome

終級用戶
積分：3020
發貼：2347
來自：兩面之城
註冊：2004-07-15
<script type="text/javascript"> writeTools('1', '2005-01-14 <FONT COLOR=#800080>14:36:06</font>', 'gogocome', 'gogocome', true, 'http://my.opera.com/noxin/blog/', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '1894771', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 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
<script type="text/javascript"> writeTools('1', '2005-08-02 <FONT COLOR=#800080>15:54:32</font>', 'uploadingl', 'uploadingl', true, 'http://www.gusllo.com', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '2164950', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-08-02 15:54:32  按此觀看uploadingl的個人資料 按此發郵件給uploadingl 訪問uploadingl的主頁 發送悄悄話給uploadingl 搜索uploadingl的所有帖子 引用這個帖子回覆  舉報不良信息
馬上就要用到這個，沒想到還是比較麻煩的。

謝謝

寒鴉
eLore

高級用戶
積分：164
發貼：83
來自：
註冊：2005-04-25
<script type="text/javascript"> writeTools('14', '2005-08-08 <FONT COLOR=#800080>11:55:04</font>', 'eLore', 'eLore', true, '', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '2174366', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-08-08 11:55:04  按此觀看eLore的個人資料 按此發郵件給eLore 發送悄悄話給eLore 搜索eLore的所有帖子 引用這個帖子回覆  舉報不良信息
確實不錯

多嬌引折腰

重構之美QQ羣(XHTML+CSS+ECMAScript):5824806
base5

初級用戶
積分：88
發貼：58
來自：
註冊：2004-12-26
<script type="text/javascript"> writeTools('1', '2005-10-11 <FONT COLOR=#800080>11:19:34</font>', 'base5', 'base5', true, '', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '2277441', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 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
<script type="text/javascript"> writeTools('10', '2005-10-11 <FONT COLOR=#800080>13:58:10</font>', 'onlycolor', 'onlycolor', true, '', '151557788', '35675221', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '2277813', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 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
<script type="text/javascript"> writeTools('1', '2005-10-13 <FONT COLOR=#800080>08:48:16</font>', 'cnbruce', 'cnbruce', true, 'http://www.cnbruce.com', '266837980', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '2280723', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 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
<script type="text/javascript"> writeTools('1', '2005-10-26 <FONT COLOR=#800080>16:51:39</font>', 'zhting', 'zhting', true, 'http://ztdream.126.com', '', '', false, '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', '2301008', '1882350', '', '%CD%F8%D5%BE%D7%DB%BA%CF%D7%A8%C0%B8', '%A1%B6CSS%B1%EA%D7%BC%C9%E8%BC%C6%A1%B7%CF%B5%C1%D0%D6%AE+CSS%D1%F9%CA%BD%C7%D0%BB%BB%BC%BC%C7%C9', false, false, 1, 0 ); </script> 發表於 2005-10-26 16:51:39  按此觀看zhting的個人資料 按此發郵件給zhting 訪問zhting的主頁 發送悄悄話給zhting 搜索zhting的所有帖子 引用這個帖子回覆  舉報不良信息
cnbruce在上個帖子中說
引用:
要有記憶，就需要使用到Cookie，將當前瀏覽者設置的樣式生成Cookie文件保存在客戶機器上，下次訪問判斷即可

cnbruce.com/test/css/

查看源代碼即可知，不過不是標準頁


還是這個方法簡單實用，現在還有沒有其他更好的方法了？
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Spring Security 如何防止點擊劫持

在當今複雜的網絡環境中，安全成爲了每一個應用程序不可或缺的一部分。點擊劫持（Clickjacking）作爲一種隱蔽的網絡攻擊手段，對用戶的信息安全構成了嚴重威脅。本文將深入探討點擊劫持的基本概念、其工作原理，並詳細介紹在 Spring Se

原創 2024-06-15 01:13:42

AUTOSAR平臺中的信息安全標準模塊

面向MCU端的AUTOSAR CP平臺加密組件——Crypto        ECU中所有的軟件單元都遭受到信息安全攻擊的可能。AUTOSAR爲保障ECU信息和數據安全，定義了CRYPTO 組件,包含 SecOC、KeyM、IdsM、Csm

原創 2024-06-14 23:11:30

「實戰應用」如何用DHTMLX將上下文菜單集成到JavaScript甘特圖中（一）

DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。 DHTMLX Gantt是一個高度可定製的工具，可以與項目管理應用程序所需的其他功能相補充。在本文

原創 2024-06-14 12:16:49

需求管理祕籍：從混亂到有序，讓你的項目高效運轉

引言 在項目管理的廣闊天地中，需求管理猶如一顆璀璨的明珠，它不僅是項目啓動的基石，更是項目成功的關鍵引擎。從最初的需求收集、分析到後期的變更管理，需求管理的每一步都深刻影響着項目的進展和結果。 需求管理是項目目標和方向的指南針 一個明確、具

原創 2024-06-14 11:55:37

調整透視投影矩陣解決深度衝突的方案

在三維渲染中經常會出現深度衝突的問題，先來探討下深度衝突的原因。 首先用透視投影矩陣*相機座標空間中的一個點： 然後對Pclip做透視除法，轉換到歸一化座標空間： 然後z座標可以簡化爲： 接着從歸一化座標空間轉換到屏幕座標

原創 2024-06-14 11:17:38

vagrant搭建虛擬機集羣

在本文中，我們將探討如何使用Vagrant和VirtualBox搭建一個虛擬機集羣。Vagrant是一個用於創建和配置虛擬開發環境的工具，它通過簡單的命令行操作，使得虛擬機的創建和管理變得異常簡單。 軟件安裝 首先，我們需要安裝Vagran

原創 2024-06-14 10:56:05

TiKV 源碼分析之 PointGet

作者：來自 vivo 互聯網存儲研發團隊-Guo Xiang 本文介紹了TiDB中最基本的PointGet算子在存儲層TiKV中的執行流程。 一、背景介紹 TiDB是一款具有HTAP能

原創 2024-06-14 00:07:19

想提高閱讀代碼的效率？試試這些工具吧！

前言 程序員間有句名言——“Talk is cheap, show me the code！”源碼的確相較於言語更接近程序真實的狀態，包含了更多的一手信息。因此，無論是剛開始學習代碼的小白還是久經沙場的代碼大神，不管是學習優秀的開源項目

京東雲開發者 2024-06-13 23:54:57

如何畫一個系統的設計圖

爲什麼寫本文 評審中發現很多研發都不會畫設計圖，有的畫的非常複雜但沒有要點，聽的人不知道要表達的是什麼；有的圖畫的非常簡單，也沒有要點。如果設計圖只有在講解的時候通過別人長時間的詢問才能明白，那麼設計圖還有什麼價值？大部分研發內心想提升

原創 2024-06-13 23:54:46

生成式推薦系統與京東聯盟廣告-綜述與應用

大型語言模型（LLM）正在深刻地影響自然語言處理（NLP）領域，其強大的處理各種任務的能力也爲其他領域的從業者帶來了新的探索路徑。推薦系統（RS）作爲解決信息過載的有效手段，已經緊密融入我們的日常生活，如何用LLM有效重塑RS是一個有前

原創 2024-06-13 23:54:45

用光線投射法渲染規則模型

在三維渲染中，如果要渲染一個球體或者橢圓球體，常用的辦法是用很多三角形組成這個模型。但是，如果想讓這個球體足夠平滑，就需要很多三角形。那有沒有其他的辦法，渲染的球體足夠平滑，而且三角形的數量很少呢？用光線投射法可以是一個好主意。 假定在一個

原創 2024-06-13 23:18:18

Ask AI 上線！構建企業級的 Chatbot

01. 背景 早些時候我們在社區微信羣發出了一份關於 Milvus 自動問答機器人的調研問卷。 調研受到了社區同學的積極響應，很快我們就收到了很多熱心用戶的回覆。 基於這些回覆，我們整理出了 Milvus Chatbot 的形

Zilliz 2024-06-13 21:25:16

AI “黏土畫風”輕鬆拿捏，手把手帶你雲端部署 ComfyUI

作者：鷗弋、筱姜 AI 繪畫領域，Stable Diffusion WebUI、Midjourney 、DALL-E 都聚攏了一大批的應用開發者和藝術創作者。ComfyUI 出現時間略晚，但是它讓創作者通過工作流的方式，實現自動化水平更高的

原創 2024-06-13 21:13:38

「實戰應用」如何用圖表控件LightningChart JS創建SQL儀表板應用（二）

LightningChart JS是Web上性能特高的圖表庫，具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫，常用於貿易，工程，航空

原創 2024-06-13 12:17:05

MoneyPrinterPlus:AI自動短視頻生成工具,賺錢從來沒有這麼容易過

這是一個輕鬆賺錢的項目。 短視頻時代，誰掌握了流量誰就掌握了Money! 所以給大家分享這個經過精心打造的MoneyPrinterPlus項目。 它可以：使用AI大模型技術,一鍵批量生成各類短視頻。 它可以：一鍵混剪短視頻，批量生成短視頻不

原創 2024-06-12 21:38:20