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

最新推荐文章于 2024-06-19 16:00:24 发布

原创最新推荐文章于 2024-06-19 16:00:24 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

Html 同时被 3 个专栏收录

262 篇文章

订阅专栏

Javascript

243 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中动态加载不同的CSS样式文件，实现点击按钮切换皮肤的效果。通过创建`link`元素并设置其属性，然后将其添加到`head`中，实现了样式表的动态加载。示例代码展示了如何根据变量`flag`的状态加载不同的CSS文件。

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>