thymeleaf修改css的link属性，实现动态控制css引入文件

缺乏、安全感 2023-06-01 06:16 21阅读 0赞

后台管理系统设计了多套主题皮肤，希望能随意切换主题风格。

![1628476-20190810113031506-1424845937.png][]

在只有一套主题的时候，是在主页面上引入该主题样式：

<link href="/public/themes/default/css/main.css" rel="stylesheet" type="text/css" />

切换主题，其实就是切换css路径中的default为不同主题的值。如切换到block主题，只需修改为：

<link href="/public/themes/block/css/main.css" rel="stylesheet" type="text/css" />

每次切换主题，来修改此处的代码，然后再显然不是一个Good idea.

下面记录下自己的两个想法：

一、通过在spring配置文件中设置project.theme；

project.theme = block

在后台通过@Value等方法读取；

@Value("${project.theme}")
        private String projectTheme;

然后通过springMVC的Model、Map、ModelMap或者ModelAndView传到前端主页面；

model.addAttribute("projectTheme", projectTheme);

主页面上通过input来保存这个主题值；

<input type="hidden" id="theme" th:value="${projectTheme}" >

然后js获取input的值，创建link标签，设置其href属性值，追加到主页面head中，

var theme = $("#theme").val();
    loadTheme(theme);

function loadTheme(theme){
        var link = document.createElement('link');
            link.type = 'text/css';
            link.rel = 'stylesheet';
            if(theme)
                link.href = '/public/themes/'+theme+'/css/main.css';
            else
                link.href = '/public/themes/default/css/main.css';
            var head = document.getElementsByTagName('head')[0];
            head.appendChild(link);
    }

实现主题通过配置文件切换。

二、通过在页面上增加切换主题按钮，点击后修改数据库的主题字段值；

后台读取该字段的值，传到前端主页面；

后续步骤可以参考上面的。

在页面上点击切换按钮，就修改了主题风格。

备注:其实一开始是想这样修改的，然而没有成功：

<link href="/public/themes/${theme}/css/main.css" rel="stylesheet" type="text/css" />

后面大佬指导，此方法可行，是这样的：

<link th:href="'/public/themes/'+ ${projectTheme} +'/css/main.css'" rel="stylesheet" type="text/css">

转载于:https://www.cnblogs.com/xphhh/p/11331093.html

[1628476-20190810113031506-1424845937.png]: /images/20230601/f1d268cbc6ba47688eac42bfd1acda6a.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css 样式引入的方法 link 与import的区别

link> 元素所参考的样式用户可以自由的选择加以改变，而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法： 1 使用<link...

喜欢ヅ旅行/ 2024年04月17日 14:16/ 0 赞/ 181 阅读

相关 CSS文件引入另一个CSS文件

1在HTML中引入css的其中的两个方法 1.1 使用链接式 <link href="style.css" rel="stylesheet" typ

客官°小女子只卖身不卖艺/ 2024年02月17日 21:57/ 0 赞/ 131 阅读

相关 CSS引入样式：link标签和@import的区别

CSS文件的引入方式有两种： 1、 HTML中使用link标签 <link rel="stylesheet" href="style.css" /> 2、CS

た入场券/ 2023年07月12日 08:46/ 0 赞/ 119 阅读

相关 thymeleaf修改css的link属性，实现动态控制css引入文件

后台管理系统设计了多套主题皮肤，希望能随意切换主题风格。 ![1628476-20190810113031506-1424845937.png][] 在只有一套主题的时候，

缺乏、安全感/ 2023年06月01日 06:16/ 0 赞/ 22 阅读

相关引入CSS text-align-last属性

Sometimes tiny details that mostly go unnoticed can make or break the user experience. T

爱被打了一巴掌/ 2022年12月03日 09:58/ 0 赞/ 150 阅读

相关 thymeleaf引入公共css、js

有时候很多css文件是公共的，我们必须要在每个html文件中引入它们，其实我们可以利用Thymeleaf的模板布局，把这些css文件抽出来，同时如果有某个html文件专属的cs

向右看齐/ 2022年11月18日 10:54/ 0 赞/ 239 阅读

相关 html中怎么用link引入css,css中link与@import引入css文件用法区别

很多WEB前段可能都会有两种在页面加导入css文件的方法，一种我们常用的在网页中直接link加入，另一种还可以在页面中@import引入css文件,下面我来给大家介绍css中l

野性酷女/ 2022年10月09日 02:48/ 0 赞/ 420 阅读

相关 thymeleaf 引入js css 无效

最近使用`thymeleaf` 引入 `js` 、`css` 总是无效。纠结了一会，然后找原因，发现了没有写 `type="text/css"` ；然后总结了一下，以防下次入坑

浅浅的花香味﹌/ 2022年05月17日 00:20/ 0 赞/ 340 阅读

相关 vue中动态修改css其中一个属性值

<template>  <div class="hello" :style="{'height':g

我就是我/ 2022年03月30日 03:41/ 0 赞/ 470 阅读

相关 vue中动态修改css其中一个属性值

<template>  <div class="hello" :style="\{'height':getClientH

偏执的太偏执、/ 2022年01月21日 03:25/ 0 赞/ 343 阅读