超級簡單web實現多樣式切換

超級簡單web實現多樣式切換

實現思路

1：刪除head的對應的樣式文件
2：新的樣式文件添加到head末尾。

代碼實現

 
    function chnageStyle(st) {
        //清除樣式
        $("head").find(".qmsType").remove();
        var css = "";
        if (st == "藍") {
            var css = '<link class="qmsType" type="text/css" rel="stylesheet" href="/src/qms/common/style.css">';
        } else if (st == "紅") {
            var css = '<link class="qmsType" type="text/css" rel="stylesheet" href="/src/qms/common/style2.css">';
        }
         //新的樣式添加到 標籤頭
        $("head").append(css);
    }

效果:

無刷新實現了樣式的切換，如下圖所示。