在js中动态不同条件引入不同的css样式文件封装方法

封装方法

function loadStyles(url) {
       var link = document.createElement("link");
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = url;
       var head = document.getElementsByTagName("head")[0];
       head.appendChild(link);
}
//调用：
loadStyles("framework/css/blue.css");

代码实现

点击换肤按钮可以变换三套皮肤

<script type="text/javascript">
        var flag = 0;
        for(var i = 0; i < 3; i++) {
            $(".change-skin p").eq(i).click(function() {
                if(flag == 0) {
                    loadStyles("framework/css/qipa250_orange.css");
                    flag = 1;
                } else if(flag == 1) {
                    loadStyles("framework/css/qipa250_cyan.css");
                    flag = 2;
                } else if(flag == 2) {
                    loadStyles("framework/css/qipa250_blue.css");
                    flag = 0;
                }
            });
        }

        function loadStyles(url) {
            var link = document.createElement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = url;
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(link);
        }
</script>