js+css簡單實現(xiàn)網(wǎng)頁換膚效果
更新時間：2015年12月29日 10:20:05 作者：淳淳剛剛
這篇文章主要介紹了js+css簡單實現(xiàn)網(wǎng)頁換膚效果的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)遍歷及修改頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了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)文章
js實現(xiàn)統(tǒng)計字符串中特定字符出現(xiàn)個數(shù)的方法
這篇文章主要介紹了js實現(xiàn)統(tǒng)計字符串中特定字符出現(xiàn)個數(shù)的方法,涉及javascript針對字符串中字符運算操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了TypeScript?中實現(xiàn)接口的類,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了js顯示世界時間的方法,可現(xiàn)實世界各大城市的當(dāng)前時間,涉及JavaScript針對時間的獲取與運算操作技巧,需要的朋友可以參考下2016-04-04
JavaScript 組件之旅（二）編碼實現(xiàn)和算法
話說上期我們討論了隊列管理組件的設(shè)計，并且給它取了個響亮而獨特的名字：Smart Queue. 這次，我們要將之前的設(shè)計成果付諸實踐，用代碼來實現(xiàn)它。2009-10-10
淺談在fetch方法中添加header后遇到的預(yù)檢請求問題
下面小編就為大家?guī)硪黄獪\談在fetch方法中添加header后遇到的預(yù)檢請求問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JS表格組件神器bootstrap table詳解（強化版）
這篇文章主要以實例的方式為大家再次介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風(fēng)格，用戶體驗比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2016-05-05
Element ui tree(樹)實現(xiàn)父節(jié)點選中時子節(jié)點不選中父節(jié)點取消時子節(jié)點自動取消功能
Elementui因為vue在國內(nèi)的影響而受益 使用量巨大樹作為一種重要的開發(fā)組件應(yīng)用廣泛，今天帶大家了解樹的靈活應(yīng)用首先我們來創(chuàng)建一個樹，對Element ui tree父節(jié)點選中時子節(jié)點不選中功能感興趣的朋友跟隨小編一起看看吧2023-07-07
這篇文章主要介紹了js 動態(tài)獲取元素寬高的幾種方式,文章通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
在線一元二次方程式計算器實例分享，大家參考使用吧2013-12-12
這篇文章主要為大家詳細介紹了微信小程序模板之分頁滑動欄的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02