js+css簡單實現(xiàn)網(wǎng)頁換膚效果
本文實例講述了js+css簡單實現(xiàn)網(wǎng)頁換膚效果。分享給大家供大家參考,具體如下:
這里做了3套外觀,分別使用不同文件夾下的同名css文件,那么怎樣實現(xiàn)js替換加載呢?
3個按鈕如下:
<a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">藍色皮膚</a><br/><br/>
<a id="skin2" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('gray')">灰色皮膚</a><br/><br/>
<a id="skin3" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('unite')">自定義皮膚</a>
js 代碼:
// 更換主題
function changeCss(cssName) {
if (document.getElementsByTagName_r("link").length > 0) {
for(var i = 0 ; i < document.getElementsByTagName_r("link").length; i++){
var ctrlLink = document.getElementsByTagName_r("link")[i];
var cssOld = ctrlLink.getAttribute("href");
var cssNew = cssOld.replace("default", cssName);
cssNew = cssNew.replace("gray", cssName);
cssNew = cssNew.replace("unite", cssName);
ctrlLink.setAttribute("href", cssNew);
}
}
}
實現(xiàn)效果:



希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
在JavaScript 中按字母排序之如何在 JS 中按名稱排序
有時你可能有一個單詞數(shù)組,你想按字母順序(從 a-z)對每個單詞進行排序,或者你可能有一個包含用戶信息(包括名字)的對象數(shù)組,例如,你想按照用戶的名字來排序,接下來通過本文給大家介紹在JavaScript 中按字母排序之如何在 JS 中按名稱排序,需要的朋友可以參考下2023-09-09
JavaScript監(jiān)測ActiveX控件是否已經(jīng)安裝過的代碼
這是通用的方法,只需要把唯一的Activex的clsid和任意一個屬性或方法名傳進來就可以判斷了。(找了兩個小時才找到 -_-!)2008-09-09
underscore之Collections_動力節(jié)點Java學(xué)院整理
underscore為集合類對象提供了一致的接口。集合類是指Array和Object,暫不支持Map和Set。下面通過本文給大家分享underscore之Collections的相關(guān)知識,需要的的朋友參考下吧2017-07-07
JavaScript?中的?parseInt()?函數(shù)詳解
parseInt函數(shù)將其第一個參數(shù)轉(zhuǎn)換為一個字符串,對該字符串進行解析,然后返回一個整數(shù)或?NaN,這篇文章主要介紹了JavaScript?的?parseInt()?函數(shù),需要的朋友可以參考下2023-05-05
JS實現(xiàn)Enter鍵跳轉(zhuǎn)及控件獲得焦點
想讓Enter鍵跳轉(zhuǎn)的同時讓控件獲得焦點,具體實現(xiàn)js代碼如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08
JavaScript實現(xiàn)Sleep函數(shù)的代碼
大家知道,JavaScript中沒有內(nèi)置我們常用的sleep()函數(shù),只有定時器setTimeout()和循環(huán)定時器setInterval()2007-03-03
JS實現(xiàn)將人民幣金額轉(zhuǎn)換為大寫的示例代碼
本篇文章主要是對使用JS實現(xiàn)將人民幣金額轉(zhuǎn)換為大寫的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02
uniapp微信小程序授權(quán)登錄并獲取手機號的方法
這篇文章主要給大家介紹了關(guān)于uniapp微信小程序授權(quán)登錄并獲取手機號的相關(guān)資料,我們在uniapp開發(fā)微信小程序的過程中,經(jīng)常需要在微信端登錄,需要的朋友可以參考下2023-06-06

