[教程]可選樣式：切換樣式表 　　這是發表於http://www.alistapart.com上的一篇關於切換樣式表的文章，由於本人水平有限，翻譯質量可能並不太好，但主要意思我想還是已經說清楚了。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ [center]可選樣式：切換樣式表（Paul Sowden)[/center] 　　你完成了一個網頁，並使用了ＸＨＴＭＬ來控制網頁結構，樣式表來體現文檔的外觀，你就應該是一個不錯的網頁製作者了。但你還可以再進一步的寫出幾個替換樣式表以體現你是多麼的厲害。 　　這樣做了很不錯，但你還需要一個跨瀏覽器的動態轉換樣式表的方法。 [b]為你的站點指定樣式[/b] 　　通過在ＨＥＡＤ中使用一系列的ＬＩＮＫ元素，可以引用多個樣式表。在一個文檔中，可以存在三種有關係的外部樣式表：公用的，首選的，備用的。 [b]公用樣式表[/b] 　　這類樣式表通常是激活了的，並被看作是起主要作用的的樣式表。它具有其他任何樣式表所共有的樣式定義。要使某一個樣式表成為公用的樣式表，它的rel屬性應該寫做「stylesheet"，而且不使用title標籤。現在把"paul.css"作為公用的樣式表，在link裡面就該這樣書寫：    [b]首選樣式表[/b] 　　這累樣式表在網頁載入時被設置為默認的，如果瀏覽者選擇了替換樣式表它們可以被關閉。 　　要讓樣式表成為首選的，rel屬性應該被設置為"stylesheet"而且還要使用title定義一個名稱。 　　多個首選樣式表可以通過指定同樣的title屬性組合在一起。這些組合在一起的樣式表將會同時被使用並同時被關閉。如果多組樣式表被聲明為首選，那第一組將被當作是首選的樣式表組。 　　現在把paul.css設置為首選的，並加上一個title值，並定義個默認的名字。    [b]備用樣式表[/b] 　　瀏覽者可以選者這類樣式來代替默認的樣式表。並且還允許瀏覽者自定義站點的樣式並選擇他們自己的方案。同時，還能被用於網站的可訪問性樣式。 　　要指定一個備用樣式表，rel值應該是"alternate stylesheet"並且也要指定一個title值。就像首選樣式表一樣，備用的樣式表也能組合在一起通過使用共同的的title值。 　　再次使用上一個例子，把paul.css定義為備用樣式表，並且把關鍵字"alternate"加入到rel屬性裡去。    　　[color=Red]註：這種關係只能用在通過連接進來的外部樣式表中。[/color] [b]樣式表轉化[/b] 　　當文檔被載入時，固定的和首選的樣式表被應用於文檔中。而備用樣式表可以被用戶所選擇。W3C認為瀏覽器應該給用戶一個選擇使用自己喜歡的樣式的機會，並建議通過下拉菜單或者工具條來實現這個選擇。 　　到現在為止還不錯，因為我們有了幾個樣式表，而且瀏覽者也能從目錄裡面選擇自己的樣式。但我們遇到了一個問題。首先，MOZILLA在查看菜單下提供了一個樣式表選擇器，但MSIE卻不提供這樣一個樣式選擇工具。因此，我們雖然有幾個樣式表，但在MSIE裡全無法使用。 　　運用少量符合DOM規則的JavaScript，我們可以給MSIE和MOZILLA用戶提供一個選擇自己的樣式表的機會。而且他們的選擇還可以被儲存在cookie裡面。因為我們象W3C所說的那樣使用了likn標籤，所以這些腳本不會干擾MOZILLA目錄裡面的選擇，相反可以和平共處。 [b]腳本[/b] 　　首先，我們需要能區分這三中類型樣式表的腳本。這相對來說非常簡單，我們只需要檢測到每個link元素中的倆個不同的值就行了。 　　[color=red]連接上樣式表了嗎？[/color]    　　[color=red]定義了title屬性嗎？[/color]    　　[color=red]rel值裡面包括了關鍵字"alternate"嗎？[/color]    　　[color=red]註：我們檢測的是"alt"字符串，因為在一些瀏覽器裡，使用關鍵字"alternative"代替"aleternate"。[/color] 　　通過這三個檢測方法，我們可以編寫一個函數來切換樣式表。這個函數可以讓我們通過link元素來循環禁用所有的我們不想使用的首選的和替換樣式表，並激活所有我們想使用的首選和備用樣式表。 　　 　　[color=red]註：只有首選與備用樣式表才使用title屬性。[/color] 這個函數如下：    　　因為這是關於樣式表的文章，而ＣＯＯＫＩＥＳ是完全不同的話題，我在這裡就不解釋關於cookie的函數了，但是為了你的方便，我會在這裡寫出這個函數(這個函數由ALA的作者Peter-Paul Kock所編寫)。    　　要使用這個COOKIE函數，我們需要在WINDOW中添加onload和onunload行為監聽器。 [b]onLoad[/b] 　　W3C制定的DOM2屬性"disabled"（當樣式表被應用於一個文檔時返回為FLASE）在MOZILLA裡可以被正確執行，但在MSIE裡卻不能夠被執行。 　　MSIE的私有屬性裡也有"disabeled"，可以用與LINK元素，但被默認設置為對所有的LINK元素都返回為FALSE。 　　為了讓MSIE的這個屬性與DOM2的屬性相匹配，我們給setActiveStyleSheet()函數定義一個首選樣式表的名稱。 　　為了檢測哪一個樣式表是首選的樣式表，我們還需要一個函數。因為這個與setActiveStyleSheet()函數差不多，我就不在解釋它是如何編寫的了，下面就是這個函數：    　　在載入函數中，我們首先設置一個title變量。它在cookie中保留上一個樣式表的值，或者沒有保留這個值。為了方便，我們把這個cookie叫做"style"。 　　然後，我們用setActiveStyleSheet()函數傳遞title變量。我們載入函數這樣編寫：    　　[color=red]註：要把這個函數放在整個文檔前，才能正確的使用我們自己定義的樣式表。如果你需要這樣做，一定要使用這幾個函數，並且要記得定義link元素。[/color] [b]onunload[/b] 　　要在關閉瀏覽器以前保存ＣＯＯＫＩＥ非常簡單。我們要做的就是使getActiveStyleSheet()函數返回當前激活的樣式表。並記錄於一個ＣＯＯＫＩＥ中。我們使用下面這個函數來保存ＣＯＯＫＩＥ。    [b]把所有東西組合在一起[/b] 　　為了讓你的站點更加迷人，你要把這些函數全部包括在你的文檔中去。為了方便我把他們寫在了一個ＪＳ文件裡，你可以下載並加到你的站點裡去。http://www.alistapart.com/d/alternate/styleswitcher.js 　　把這個文件放到你的ＨＥＡＤ之間，要記得一定得放在所有連接樣式表的link元素的後面。html因該這樣寫：    　　為了讓瀏覽者切換樣式表，你可以使用一個onClick函數。比如。要在默認與paul倆個樣式表中切換，你的html文檔應該這樣寫：    　　一旦瀏覽者選擇了一個樣式表，它將會保存在cookie中。要在整個站點使用相同的樣式，同樣的樣式表和腳本連接都要包含每頁的head之間。 [b]完成了，朋友們！[/b] 　　現在你有了一個可定制樣式的站點，就像Ｗ３Ｃ宣稱的那樣。。祝你愉快！ 　　[color=red]Paul Sowden是一個來自英國倫敦的小伙子，他認為如果每個設計者都使用與標準兼容的技術，網絡將會成為一個更好的地方。[/color] 　　這是我嘗試翻譯的第一篇文章，質量並不太好，希望大家諒解！如果有不對的地方請大家指出來。

這個好！第一個頂！

鬱悶，沉得也真快啊！寫得差也可以提提意見嘛，難道現在大家只想要效果，不想原理？

好文章!樣式表切換效果是做css佈局站點經常用的功能. 一直想寫這個教程,最近太忙,沒時間寫.感謝yanle520的辛苦工作!!收藏:)

別忘了列出原始文檔地址 http://www.alistapart.com/articles/alternate/ 精神可嘉，質量一般，鼓勵鼓勵，繼續努力i

頂一下，正在學習這相關的內容。

不用那麼複雜吧。。

[ 關閉窗口 ]