thymeleaf 动态在html中根据后台返回到前台的值添加class样式

最新推荐文章于 2025-07-06 15:47:48 发布
原创 最新推荐文章于 2025-07-06 15:47:48 发布 · 1w 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#thymeleaf

本文介绍了一种在Thymeleaf中根据条件动态添加CSS样式的技巧。具体来说，当对象lunbo1的id存在时，会应用'myShowStyle'样式；反之，则应用'myHideStyle'样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

说明下：外层为一个div。class样式中有几个值，现在想动态添加一个class样式。myShowStyle和myHideStyle都是两个css样式。

这里对象lunbo1的id如果不为空就添加myShowStyle，否则就添加myHideStyle

th:classappend="${lunbo1.id != null} ? 'myShowStyle' : 'myHideStyle'"

 

SpringBoot+Thymeleaf+Jquery实现模态框的显示与数据填充
BADAO_LIUMANG_QIZHI的博客
05-14 7415
场景 实现 Html代码 <div th:fragment="content"> <div class="ibox float-e-margins"> <div class="ibox-content"> <div class="table-responsive"> ...
Thymeleaf th:classappend属性追加 th:styleappend样式追加 th:data-自定义属性
菜鸟记录
07-04 4979
⏹Thymeleaf th:classappend属性追加 th:styleappend样式追加 th:data-自定义属性
thymeleaf 怎样动态添加class样式
热门推荐
weixin_44357646的博客
09-14 1万+
**<li class=""th:classappend="${page == pageNnm} ? 'active' : '' "> 说明：当page == pageNnm 两个属性相等时，class=‘active’ 不等时为 ‘’ " 既为空
关于Thymeleaf 的条件语句 th:if 和 th:unless的使用（带demo）
最新发布
s_sos0的博客
07-06 535
Arenaschi出品，必属精品！ Arenaschi出品，必属精品！ Arenaschi出品，必属精品！
通过Thymeleaf添加class
m0_48703915的博客
12-18 752
通过Thymeleaf添加class
thymeleaf th:class两个下划线造成 Could not parse as expression:
qq_37002521的博客
05-30 699
错误写法： th:class="${page == 'userSet'}?'weui-tabcc__ccbd-item dddsdsd':'weui-tab__bd-item'" 正确写法(自己测试出来的，真的很坑) th:class="${page == 'userSet'}?'weui-tabcc_'+'_ccbd-item dddsdsd':'weui-tab_'+'_bd-item'"
thymleaf动态添加类
dream_follower的博客
04-08 1388
要实现动态添加类需要使用th:classappend标签， <div th:classappend="${error==null} ? 'show-error' :''"></div> 上面这句，如果errror 为null的时候，就会给这个div在原有的class的基础上添加一个show-error的类，如果直接用th:class会直接替换掉它原有的类 ...
Thymeleaf凭借URL，动态获取CDN服务器的CSS和JS文件的url
super_this_part的博客
11-29 1289
语法： @{XXXXX} <link rel="stylesheet" th:href="@{{host}/static/wangEditor/release/fullscreen.css(host=${hostname})}"/> <script type="text/javascript" th:src="@{{host}/static/js/jquery-3.4.1....
java+thymeleaf+echartys实现图表导入到word
Asajksabdsb的博客
11-01 1195
网上找过很多方法，但一直没有特别合适的直接导入方式，所以借鉴一篇博客的方法：先将echarts图表保存到本地临时文件，然后将文件添加到word摸板的对应位置，虽然比较繁琐，但摸板可调，操作更灵活。 参考博客连接：https://blinkfox.github.io/2018/10/01/hou-duan/java/shi-yong-java-diao-yong-phantomjs-dong-ta...
Spring Boot（四）：Spring Boot 集成 Thymeleaf
On Road ...
12-25 1551
Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP，Velocity，FreeMaker等，它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比，Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用，这是由于它支持 html 原型，然后在html 标签里增加额外的属性来
SpringBoot+Mybatis+Thymeleaf学习过程中遇到的问题
WEN_Windy的博客
08-14 982
1、IDEA+DevTools实现热部署功能 转载：https://www.cnblogs.com/MrSi/p/9540730.html 2、SpringBoot+themleaf无法加载js、css等静态资源文件 解决方法： 第一步：将html网页文件放在类目录resources下的templates文件夹下面。 第二步：将需要的css、js放在static静态资源文件夹下面，文件结...
Thymeleaf常用th标签
C_B_W_的博客
07-14 397
https://www.jianshu.com/p/f9ebd23e8da4 暂时先贴链接
thymeleaf根据后台返回的值动态添加class样式
lyt的博客
10-22 1998
说明下：外层为一个div。class样式中有几个值，现在想动态添加一个class样式。myShowStyle和myHideStyle都是两个css样式。 这里对象lunbo1的id如果不为空就添加myShowStyle，否则就添加 myHideStyle`th:classappend="${lunbo1.id != null} ? 'myShowStyle' : 'myHideStyle'" ...
Thymeleaf——在不覆盖现有class属性的情况下动态添加CSS class解决方案
无限迭代中......
02-03 3355
问题描述 th:class动态添加CSS class会覆盖现有class属性，导致class较多时，表达式过长。 官方文档 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appending-and-prepending 解决方案 th:classappend：用于在不覆盖现有属性的情况下向元素添加CSS c...
Thymeleaf基础知识语法
weixin_47480200的博客
03-19 3442
Thymeleaf是⾯向Web和独⽴环境的现代服务器端Java模板引擎，能够处理HTML、XML、JavaScript、CSS、TEXT、RAW这六种模板。这六种模版模式包含两种标记模板模式（HTML和XML），三种⽂本模板模式（TEXT，JAVASCRIPT和CSS）和⼀个⽆操作模板模式（RAW）。①简单表达式②文字③⽂本操作④算术运算符⑤布尔运算符⑥⽐较和相等运算符⑦条件运算符⑧特殊符号无操作： _
thymeleaf 用法小记
蜂蜂的专栏
01-26 669
1.格式化日期 原来：updateTime 改成:  updateTime 更改后截图： 2.待定
thymeleaf（4） - 条件判断
mytt_10566的博客
08-08 4269
官方文档：https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#conditional-evaluation   以下是翻译的官方文档，建议自己阅读下文档。 1. 简单条件：if和unless 有时候，我们需要仅仅在满足一定条件才显示代码片段。例如，在产品表格列中，当产品有评论信息的时候添加一个链接用于查看评论详情，...
SpringBoot - thymeleaf 动态填充 html 页面数据
modelmd的博客
04-02 1627
注意：如果 index.html 页面没有打包进入 target目录，会报页面找不到的错误，如果没有打包到 target的话，在 pom 文件行添加如下片段。使用 model 模型增加动态属性值，thymeleaf 默认寻找 .html 的后缀静态页面。
后端返回文本有html标签，保留img去除其他标签并换行
behance的博客
06-25 405
【代码】后端返回文本去除html标签并换行处理。
在配置文件中，如果要动态添加Thymeleaf模板后缀名，则需要配置
12-17
在Thymeleaf中，如果你想要动态地在配置文件中添加模板后缀名（比如从数据库、环境变量等来源获取），你需要配置`TemplateEngine`。Thymeleaf允许通过`TemplateResolver`来指定模板的位置和后缀。在Spring Boot应用中，这通常发生在`ThymeleafProperties`的配置里。 例如，在`application.properties`或`application.yml`中，你可以设置这样的内容： ```properties spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=<!-- 这里可以使用#{yourDynamicSuffix}或者其他表达式来获取动态后缀 --> spring.thymeleaf.mode=HTML5 ``` 或者在Java配置中： ```java @Bean public SpringTemplateEngine templateEngine() { SpringTemplateEngine engine = new SpringTemplateEngine(); TemplateResolutionUtils.setCacheable(engine.getTemplateResolver(), true); // 获取动态后缀并设置到resolver中 String dynamicSuffix = ...; // 从数据库或环境变量获取 Properties properties = new Properties(); properties.put("suffix", dynamicSuffix); Configuration config = new Configuration(StandardEvaluationContext); config.setVariables(properties); engine.setConfiguration(config); return engine; } ``` 这样，每次运行时可以根据实际的后缀值去查找对应的模板文件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值