網站製作學習誌

記錄學習製作網站的一切

新增動態置換版型的功能

怎麼透過 JavaScript 讓網站可以動態更換版型呢？

其實原理很簡單。不過在這之前，你必須得知道什麼叫 DOM 並且會使用標準的 JavaScript(ECMAScript)，這裡我就不多說囉。

檢視部落格的原始檔，我們通常可以看到類似像這樣的 HTML ：

1
2
3
4

<link rel="stylesheet" href="http://blog.roodo.com/jaceju/site.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://blog.roodo.com/jaceju/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://blog.roodo.com/jaceju/atom.xml" />
<link rel="meta" type="application/rdf+xml" title="FOAF" href="http://blog.roodo.com/jaceju/foaf.rdf" />

一般我們都是用 <link rel="stylesheet" href="xxxx.css" type="text/css" /> 來載入 CSS 檔案，其中的 href 屬性指向 CSS 檔案的位置；因此我們只要改變第一個 <link> 標籤的 href 屬性，指向另一個 CSS 檔案，這樣就能改變整個網站的風格。但有些部落格的 <link> 標籤總有好幾個，且每個 <link> 標籤的任務都不同，如何取得正確的 <link> 標籤呢？

我們用標準的 JavaScript(ECMAScript) 來取得第一個 <link> 標籤 (就是指向 CSS 檔案的那個) ：

1

var oLink = document.getElementsByTagName('link')[0];

首先， var 表示宣告一個變數， oLink 就是變數名稱。接著我們用 document.getElementsByTagName('link') 來取得整個頁面裡所有的 <link> 標籤，如此一來我們會得到一個包含所有 <link> 標籤物件的陣列。最後我們用 [0] 表示要抓取第一個 <link> 標籤物件，因為 JavaScript 的陣列是從 0 開始算起的。

現在 oLink 就是我們所要的第一個 <link> 標籤，我們就可以用以下的程式來改變它的 href 屬性： 

1

oLink.href = 'CSS檔案的位置';

在 <link> 標籤中，我們用 href="xxx" 來代表屬性；而在 JavaScript 裡，我們則是在物件名稱後面用句點加上屬性名稱來取得或修改物件的屬性。

另外，我用了一個陣列來存放多個 CSS 檔案位置，然後我在 <a> 標籤裡放了一個 JavaScript 事件 onclick 。當我按下連結時， onclick 事件會呼叫一個 chageTheme 函式，並傳入一個索引值，如此一來就能更換不同的版型了。

完整的程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
var sCSSFileURL = new Array(2);
sCSSFileURL[0] = 'http://www.mosu.com.tw/temp/mycss.php?css_url=http://homepage13.seed.net.tw/web@3/jaceju/theme/css1/theme1.css';
sCSSFileURL[1] = 'http://www.mosu.com.tw/temp/mycss.php?css_url=http://homepage19.seed.net.tw/web@3/jaceju/theme/css2/theme2.css';
sCSSFileURL[2] = 'http://blog.roodo.com/jaceju/71049e1a.css';
function changeTheme(iCSSFileURLIndex) {
    var oLink = document.getElementsByTagName('link')[0];
    oLink.href = sCSSFileURL[iCSSFileURLIndex];
    return false;
}
</script>
<a href="#" onclick="return changeTheme(0);">置中兩欄版型</a>
<a href="#" onclick="return changeTheme(1);">全版面兩欄版型</a>
<a href="#" onclick="return changeTheme(2);">全版面兩欄版型</a>

原本在我把 CSS 檔案放到我的 SEEDNET 網頁空間，並在 Internet Explorer 上測試正常後，就該告一段落。但是當我用 FireFox 觀看時，卻發現 CSS 因為 MIME-Type 錯誤而無法載入。原來 Seednet 在輸出 CSS 檔案的時候，並沒有輸出正確的 MIME-Type: text/css 。

怎麼辦呢？當然我們不可能去設定 Seednet 的伺服器上的 MIME-Type 設定檔，所以我用了兩種方式來解決這個問題：

  1. 透過 PHP 的 header 函式丟出正確的 Content-Type 檔頭，再讀取 CSS 檔案內容輸出。
  2. 把 CSS 檔案上傳到可以輸出正確 MIME-Type 的網頁空間上面。

兩種方法各有優缺點，不過以方便性來說，第 2 種比較好。因為第 1 種方式必須用到 PHP ，我想不是每個人都會寫這樣的程式。

當然不僅有部落格能夠這樣玩，如果你自己製作網頁，這樣的方式也能讓你的網頁更加豐富，試試看吧。

Comments