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/orange.css");
                    flag = 1;
                } else if(flag == 1) {
                    loadStyles("framework/css/cyan.css");
                    flag = 2;
                } else if(flag == 2) {
                    loadStyles("framework/css/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>

 

转载于:https://www.cnblogs.com/150536FBB/p/11490272.html