超级简单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);
    }

效果:

无刷新实现了样式的切换，如下图所示。