2/28/2007

在頁面上更換css style

原文刊載於 http://www.alistapart.com/stories/alternate/

做法如下:

步驟1. -->
自上述網址下載 styleswitcher.js 檔案放入目錄資料夾, 並在<head>加上
<script type="text/javascript" src="styleswitcher.js"></script>

步驟2. -->
將欲加入的css style 依次列進<head>
第一行stylesheet 為預設的style, 其他alternate stylesheet 為選項style, 然後自定title 名稱(如以下藍字)

<link rel="stylesheet" type="text/css" href="css/index01.css" title="green"><link rel="alternate stylesheet" type="text/css" href="css/index02.css" title="yellow"><link rel="alternate stylesheet" type="text/css" href="css/index03.css" title="purple">

步驟3. -->
內容html選項的寫法如下, 以下的紅字部分需逐一對應步驟2的藍字才能趨動所命名的style

<p> 更換頁面風格 : 【 <a href="css/index01.css" onclick="setActiveStyleSheet('green'); return false;">綠色</a> 】
【 <a href="css/index02.css" onclick="setActiveStyleSheet('yellow'); return false;">褐色</a> 】
【 <a href="css/index03.css" onclick="setActiveStyleSheet('purple'); return false;">紫色</a> 】 </p>

雖然有預設的style, 但因為js檔中有 Cookie 寫法, 下次再開啟時會以上次最後設定的style為style

9 則留言:

Amos 提到...

沒有紅字跟藍字
是不是漏掉了?

Jane 提到...

是滴! 忘了標示
多謝指正, 已經改好了.

獅子男 提到...

在IE7下觀看會有問題,例如:在不同的CSS底下色背景顏色,不會顯示整個畫面,只會顯示於畫面的上半段,在Firefox則不會,是需要再設定什麼嗎?

Jane 提到...

如果css的style(顏色)有更換, 這個功能就已經設定正確

"IE7不會顯示整個畫面"很可能是IE對float不正常顯示的問題, 可能有某一組css設定為float: left(或right), 請在該組給一個寬度值看看!(如width: 100%; 或 width: 500px;)

通常這種方式可以解決這種bug, 不然就將float: left拿掉改用display: inline代替.

獅子男 提到...

採用Paul Sowden的方式,仍然會有我之前的狀況發生。
而我採用另一種方式,就可以了。
請參考:
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

Jane 提到...

沒看到你的檔案, 無從判斷問題點
我在幾個專案使用過這方式, 並沒有你提到的問題

Dynamic Drive的方法和Paul Sowden方法類似, 也是先load幾支css進來, 一組預設, 其他為可輪替.

但是新增以radio button, 下拉選單方式選取style, 外加可以設定cookie記憶天數或是隨機記憶, 在頁面上設定style的方法比較豐富

只是要提醒一下這裡的範例只使用<html>, 沒加網頁宣告, 例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

不是標準網頁的正確用法, 對css寬度解譯有影響, 沒加宣告是"相容模式"的顯示, 加上之後才是"標準模式"顯示

nana 提到...

請問大大,有辦法把javascript裡面針對cookie的語法拿掉嗎?

Jane 提到...

我知道可以怎麼用, 但不知道如何改. 恐怕要請會javascript的人幫忙.

ant2legs 提到...

歡迎使用我的線上手冊:
HTML,
CSS,
Javascript