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

Bertha 。 2022-09-04 11:50 195阅读 0赞

### 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS动态增加CSS样式的方法

![49b2c659c2bceb1d17c005475b5342b0.jpeg][] 为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。

野性酷女/ 2024年04月01日 13:11/ 0 赞/ 91 阅读

相关 uni-app中引入组件、css样式以及js文件的方法

引入组件 import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue' impo

客官°小女子只卖身不卖艺/ 2022年11月13日 07:29/ 0 赞/ 1197 阅读

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

js中动态不同的css样式文件的封装方法封装方法代码实现封装方法 function loadStyles(url) {

Bertha 。/ 2022年09月04日 11:50/ 0 赞/ 196 阅读

相关 Vue-cli单文件组件引入less、sass、css样式的不同方法

vue-cli中已经内置配置好了sass 以及lass的配置。如果需要的话直接下载两个模块就可以了,webpack它会根据 `lang` 属性自动用适当的加载器去处理。

古城微笑少年丶/ 2022年06月13日 13:10/ 0 赞/ 322 阅读

相关根据不同status状态参数动态展示不同css样式

第一种：两种不同状态切换显示，在class属性中使用三目运算符动态选择Class属性即可在wxss中定义被点击和未被点击的样式，如下： \[css\] [view

妖狐艹你老母/ 2022年05月27日 04:07/ 0 赞/ 582 阅读

相关 vue.js引入外部CSS样式和外部JS文件的方法

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

忘是亡心i/ 2022年02月13日 14:23/ 0 赞/ 437 阅读

相关 iview搭建项目中引入define.js后编译，根据不同分支引入不同的define.js文件

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 第一种：cross-env 1、安装cross-

叁歲伎倆/ 2022年01月15日 22:45/ 0 赞/ 344 阅读

相关 js引入css/js文件 3中方法

使用js动态引入js和css文件方法方法1： //引入css var head = document.getElementsByTagName('head

矫情吗；*/ 2021年11月27日 02:24/ 0 赞/ 449 阅读

相关 vue的某元素在不同条件下采用不同的样式

html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

向右看齐/ 2021年11月22日 11:28/ 0 赞/ 662 阅读

相关 js 根据不同条件引入不同的js 文件

var lanuage=sessionStorage.getItem("sysManager_i18nLanauge"); if(lan

浅浅的花香味﹌/ 2021年10月08日 07:42/ 0 赞/ 1017 阅读