原文刊載於 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 則留言:
沒有紅字跟藍字
是不是漏掉了?
是滴! 忘了標示
多謝指正, 已經改好了.
在IE7下觀看會有問題，例如：在不同的CSS底下色背景顏色，不會顯示整個畫面，只會顯示於畫面的上半段，在Firefox則不會，是需要再設定什麼嗎？
如果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
沒看到你的檔案, 無從判斷問題點
我在幾個專案使用過這方式, 並沒有你提到的問題
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寬度解譯有影響, 沒加宣告是"相容模式"的顯示, 加上之後才是"標準模式"顯示
請問大大，有辦法把javascript裡面針對cookie的語法拿掉嗎？
我知道可以怎麼用, 但不知道如何改. 恐怕要請會javascript的人幫忙.
歡迎使用我的線上手冊:
HTML,
CSS,
Javascript
張貼留言