实现多网页换肤效果

标签（空格分隔）： js

实现网页换肤

1）html中
<link rel="stylesheet" type="text/css" href="eplat.css" class="theme" />

   <button class="" onclick="changeTheme(this);">蓝色</button>
   <button class="" onclick="changeTheme(this);">默认</button>

2)js中

function changeTheme(objThis) {
    $(objThis).addClass("active");
    $(objThis).siblings().removeClass("active");
    var curColor = $(objThis).html();
    if (curColor == "蓝色") {
        var fileName = "eplat_blue";
    } else if (curColor == "默认") {
        fileName = "eplat";
    }
    event.stopPropagation();
    var curHref = "css/component/" + fileName + ".css";
    $(".eplat-theme").prop("href", curHref);
    console.log("curHref------", curHref);
    //保存肤色名
    setStorage("skinName", fileName);

}
//html5设置本地存储
function setStorage(sname, vul) {
    window.localStorage.setItem(sname, vul);
}

function getStorage(attr) {
    var str = window.localStorage.getItem(attr);
    return str;
}

function getDefaultTheme(url) {
    //访问本地存储，获取皮肤名
    var cssName = getStorage("skinName");
    //判断是否有皮肤名，就使用获取的皮肤名，没有就用默认的
    if (cssName && cssName != null) {
        url += "css/component/" + cssName + ".css";
        $(".eplat-theme").prop("href", url);
    } else {
        //没有皮肤就使用blue默认的路径
        url += "css/component/eplat.css";
        $(".eplat-theme").prop("href", url);
    }
    console.log("curParh-----",  url);
}

3)调用
getDefaultTheme("./")
根据不同的页面的相对路径去调用