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

來源:互聯網
上載者:User

最近公司要開發一個房產網,老大要實現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();
};


相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。