這篇文章主要介紹JavaScript實現(xiàn)換膚功能的方法，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為貴南企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站建設(shè)，貴南網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

一，js換膚的基本原理

基本原理很簡單，就是使用 JS 切換對應(yīng)的 CSS 樣式表文件。例如導(dǎo)航網(wǎng)站 Hao123 的右上方就有網(wǎng)頁換膚功能。除了切換 CSS 樣式表文件之外，通常的網(wǎng)頁換膚還需要通過 Cookie 來記錄用戶之前更換過的皮膚，這樣下次用戶訪問的時候，就可以自動使用上次用戶配置的選項。 那么基本工作流程就出來了：訪問網(wǎng)頁——JS 讀取 Cookie ——如果沒有，使用默認(rèn)皮膚——如果有，使用指定皮膚；用戶點擊換膚選項——JS 控制替換對應(yīng)的 CSS 樣式表——將皮膚選項寫進(jìn) Cookie 保存。

二，事先需要的準(zhǔn)備工作

1，不同的皮膚對應(yīng)不同的css文件，準(zhǔn)備好多套css樣式文件：

如藍(lán)色對應(yīng)：skinColour_blue.css

黃色對應(yīng)：skinColour_yellow.css

2，圖片存放在不同的皮膚文件夾下：

例如，藍(lán)色對應(yīng)：blue文件夾；黃色對應(yīng)：yellow文件夾。

將不同皮膚顏色的圖片放在相對應(yīng)的文件夾里，圖片切換原理：在換膚函數(shù)里設(shè)置img標(biāo)簽的src路徑屬性來切換圖片。

三，換膚實現(xiàn)的過程

1，在網(wǎng)頁開頭引入css文件

2，在頁面上定義2個皮膚切換按鈕

藍(lán)色
黃色

3，在js的代碼，通過函數(shù)觸發(fā)切換標(biāo)簽的css路徑，和圖片的路徑，來實現(xiàn)換膚

//把引入皮膚css路徑標(biāo)簽選出來
var cssStyle = document.getElementById('skinColour');
//換膚函數(shù)
function changeSyle(name) {
event.stopPropagation();
cssStyle.href = "Content/aps/skinColour_" + name + ".css";
//保存膚色名
setStorage("skinName", name);
//切換圖片的路徑
$('.home-bReturn').attr('src', 'img/' + name + '/home_yzl_8.png');
$('.home-bHome').attr('src', 'img/' + name + '/home_yzl_7.png');
}
//html5設(shè)置本地存儲
function setStorage(sname, vul) {
window.localStorage.setItem(sname, vul);
}
function getStorage(attr) {
var str = window.localStorage.getItem(attr);
return str;
}
//訪問本地存儲，獲取皮膚名
var cssName = getStorage("skinName");
//判斷是否有皮膚名，就使用獲取的皮膚名，沒有就用默認(rèn)的
if (cssName && cssName != null) {
cssStyle.href = "Content/aps/skinColour_" + cssName + ".css";
//設(shè)置圖片路徑
$('.home-bReturn').attr('src', 'img/' + cssName + '/home_yzl_8.png');
$('.home-bHome').attr('src', 'img/' + cssName + '/home_yzl_7.png');
}else{
//沒有皮膚就使用blue默認(rèn)的路徑
cssStyle.href = "Content/aps/skinColour_blue.css";
//設(shè)置默認(rèn)圖片路徑
$('.home-bReturn').attr('src', 'img/blue/home_yzl_8.png');
$('.home-bHome').attr('src', 'img/blue/home_yzl_7.png');
}

四，總結(jié)換膚遇到的問題

1，js動態(tài)生成的標(biāo)簽換膚，例如jq通過字符串拼接，添加到頁面上的img圖片標(biāo)簽

1)，通過本地存儲獲取皮膚名函數(shù)取到皮膚名值，判斷這個值是否有，有的話，就用取到皮膚名，沒取到值就用默認(rèn)的blue藍(lán)色

//html5獲取本地存儲皮膚
  var cssName2 = getStorage("skinName");
  //判斷皮膚名,切換圖片路徑
  var imgSrcCinema;
  if (cssName2 && cssName2 != null) {
    imgSrcCinema = cssName2;
  } else {
    imgSrcCinema = 'blue';
  };

2)，在js動態(tài)生成的地方寫法：通過字符串拼接，+變量來實現(xiàn)

   var liImg = '