首页 > Web开发 > 详细

js中动态引入css样式文件

时间:2019-09-09 11:33:30      阅读:122      评论:0      收藏: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);
}

使用:

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>

 

js中动态引入css样式文件

原文:https://www.cnblogs.com/150536FBB/p/11490272.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!