html页面动态加载css，可以根据系统参数配置_html标签添加css动态属性-优快云博客

本文链接：https://blog.youkuaiyun.com/WO8451401/article/details/126586907

正常的加载是在head中引入css链接如下

<head>
  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all-neptune.css" />
    <link rel="stylesheet" type="text/css" href="css/global.css" />
    <link rel="stylesheet" type="text/css" href="css/head.css" />
    <link rel="stylesheet" type="text/css" href="ext/resources/css/calendar.css"/>
    <link rel="stylesheet" type="text/css" href="ext/ux/css/ItemSelector.css"/>
    <link id="cusCss" rel="stylesheet" type="text/css" href="css/neptune.css" />
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    <script type="text/javascript" src="ext/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="script/jsencrypt.js"></script>
    <script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="script/tool/echarts/echarts-all.js"></script>
    <script type="text/javascript" src="script/frame/auth/ModifyPassWordWin.js"></script>
</head>

如果我想动态加载怎么处理用jQuery 来加载

1、先定义一个加载样式的方法

在script标签中添加

var loadStyle = function(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);
};

2、页面加载完毕之后在script标签中添加初始化方法

yml文件配置名称

后台获取方法

根据ajax后台动态请求需要加载的css名称

(function () {

    $.ajax({
        type: 'get',
        //data: {"menuId": this.item.menuId, "from":'tab'},
        url: 'frame/getStyle.action',
        success: function(result){
            var json = eval("("+result+")");//将json类型字符串转换为json对象
            console.log('获取样式'+json.configZt);
            if(json.configZt){
                // css加载
                loadStyle('ext/resources/css/'+json.configZt+'.css');
            }
            if(json.configMenuIcon){
                // css加载
                loadStyle('css/'+json.configMenuIcon+'.css');
            }
        }
    });


})();