網站換膚程式碼範例(javascript)

最近公司要開發一個房產網，老大要實現cn.yahoo.com首頁的換膚功能，這幾天研究了一下！發現了一個新的換膚方法，不知道以前有人用過沒有！在這裡把思路說一下，供大家參考！


在開始動手之前上網找了一下相關的換膚方法！和我以前用過的基本一樣！方法如下：
在網頁中先匯入所有的皮膚檔案：

<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"/>

然後通過js修改Link.disabled屬性為true/false，來實現樣式表的切換！但是一次必須匯入所有的皮膚樣式檔案，對於我們要開發的網站來說，一次匯入的代碼過多，會影響網站的開啟速度！

昨天在看js資料的時候發現，修改Link.href的屬性後，瀏覽器會即時載入新的樣式表，不用做任何觸發設定，這正是我想要的，下面說說具體思路：

首先準備好相應的皮膚樣式檔案，當初次頁面載入時值調用預設的皮膚，當瀏覽者點擊換膚按鈕時，用js在最後一個LINK標籤後載入一個引用相應皮膚樣式檔案的LINK標籤，這樣就顯示了換膚，瀏覽器會即時顯示換膚後的效果。當點擊下一個換膚按鈕時，只要切換最後載入的LINK標籤的href屬性的串連地址就可以了！

因為引用了一個外部js架構，所以代碼沒辦法全貼出來，我把核心的貼一下！

複製內容到剪貼簿

代碼:

/* =shiftSkin() 更換皮膚
---------------------------------------------------------------------------*/
function shiftSkin(skinName) {
    // 儲存當前皮膚名稱
    nowSkin = skinName;
    // 格式化皮膚檔案串連地址
    var linkHref = '/styles/skin/' + skinName + '.css';
    // 更換皮膚檔案
    if(document.getElementById('skin')) {
        // 如果存在引用皮膚的元素節點,則更新皮膚檔案串連地址
        document.getElementById('skin').href = linkHref;
    } else {
        // 如果沒有引用皮膚的元素節點,則建立引用元素節點
        var linkTag = NET.BYICE.DOM.create('link');
        NET.BYICE.DOM.attr(linkTag, 'id', 'skin');
        NET.BYICE.DOM.attr(linkTag, 'type', 'text/css');
        NET.BYICE.DOM.attr(linkTag, 'rel', 'stylesheet');
        // 賦給當前皮膚檔案串連地址
        NET.BYICE.DOM.attr(linkTag, 'href', linkHref);
        // 追加引用皮膚的元素節點
        var links = document.getElementsByTagName('link');
        NET.BYICE.DOM.after(links[links.length-1],linkTag);
    };
    if(skinCookie) {
        skinCookie.skinName = skinName;
        skinCookie.store(30, '/');
    };
    // 調用高亮顯示當前皮膚的串連節點元素
    isNowSkin();
};