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