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

最新推荐文章于 2024-05-16 17:28:54 发布
最新推荐文章于 2024-05-16 17:28:54 发布
阅读量1w 收藏 5
点赞数 3
分类专栏： thymeleaf 文章标签： thymeleaf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lei_Da_Gou/article/details/84396733
版权

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

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

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

 

Lei_Da_Gou
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
thymeleaf修改css的link属性，实现动态控制css引入文件
weixin_30815469的博客
08-10 1447
后台管理系统设计了多套主题皮肤，希望能随意切换主题风格。 在只有一套主题的时候，是在主页面上引入该主题样式： <link href="/public/themes/default/css/main.css" rel="stylesheet" type="text/css" /> 切换主题，其实就是切换css路径中的default为不同主题的值。如切换到blo...
浅析SpringBoot中使用thymeleaf找不到.HTML文件的原因
08-18
在使用Thymeleaf时，需要在pom.xml文件中添加相应的依赖项，否则Spring Boot无法找到Thymeleaf模板引擎。pom.xml文件中添加以下依赖项： ```xml <groupId>org.springframework.boot <artifactId>spring-boot-...
SpringBoot - thymeleaf 动态填充 html 页面数据
modelmd的博客
04-02 1216
注意：如果 index.html 页面没有打包进入 target目录，会报页面找不到的错误，如果没有打包到 target的话，在 pom 文件行添加如下片段。使用 model 模型增加动态属性值，thymeleaf 默认寻找 .html 的后缀静态页面。
vue获取后台返回的html格式里面的style样式覆盖解决方法
weixin_44897405的博客
07-22 1947
使用v-html渲染图： 正常界面图： 很明显的看到使用v-html，返回的style样式把整体样式修改了，我这里的解决方法是使用iframe标签 1.获取iframe标签 2.插入后台返回的html 希望能帮到大家~
springboot 通过thymeleaf引入静态html页面并引入js、css文件
最新发布
weixin_41463944的博客
05-16 443
springboot 通过thymeleaf引入静态html页面并引入js、css文件
Thymeleaf 常见使用
qq_34579060的博客
04-01 610
1.1 官网地址 网站： https://www.thymeleaf.org/ 文档地址: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 1.2 遍历 <div class="media" th:each="question:${questions}"> <div...
Thymeleaf中设置每个页面引入公共css样式
BADAO_LIUMANG_QIZHI的博客
06-28 3026
场景 Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/93969759 参考上文，通过提取公共页面的方式达到所有基本的css文件不用在每个页面重复引用。 现在要修改项目中所有页面的table的标题为居中，并且添加几个公共的引用样式。 实现 新建...
thymeleaf循环遍历集合并呈现在表格中
12-14
数据库中有张名为commanders的表存有多个人的信息, 现在通过后台去查询整张表, 返回一个集合, 要求使用thymeleaf动态的把集合内容以表格的形式展示在网页上 表的内容如下 后台关键代码如下 @Controller public ...
blog系统，博客系统,后台springboot,前台thymeleaf,mysql.zip
06-18
blog系统，博客系统,后台springboot,前台thymeleaf,mysql 环境： idea mysql 5.7 springboot2.2.2 shiro1.4.1 技术栈 mybatis springMvc springboot thymeleaf模板引擎 Semantic Ui shiro docker 错误 1....
thymeleaf_3.0.5_中文参考手册.pdf
08-20
Thymeleaf 提供了多种方式来设置属性值，例如设置任何属性的值、设置指定属性的值、一次设置多个属性的值等。 6. 循环迭代 Thymeleaf 提供了循环迭代的功能，例如基本语法、保存迭代状态、通过数据懒加载进行迭代...
在 thymeleaf网页中，js获取model中的数组列表.txt
10-10
在thymeleaf网页中，js获取后台model传递过来的对象很重要，这对减少数据库表操作代码的工作量，以及使前台开发更具灵活行怎么强调也不过分。获取model传过来的简单变量很简单，但是获取它传过来的对象不容易。 本例...
thymeleaf 怎样动态添加class样式
weixin_44357646的博客
09-14 1万+
**<li class=""th:classappend="${page == pageNnm} ? 'active' : '' "> 说明：当page == pageNnm 两个属性相等时，class=‘active’ 不等时为 ‘’ " 既为空
关于thymeleaf 循环时按照循环情况 添加style属性或者 class 属性
GinChou的萌新博客
05-17 2386
需求： 在循环时根据偶数位添加一个样式属性。 例如实现代码为： <ul class="list"> <li class="clearfix" onclick="hrefArticle(51)"> <a href="javascript:;" title="444"> <div class="time fl"><p class="day">51&.
thymeleaf th:if 判断表达式
热门推荐
你当像鸟飞往你的山~~
01-13 23万+
作者：LoveEmperor-王子様 thymeleaf 判断表达式注意： gt：great than（大于）&gt; ge：great equal（大于等于）&gt;= eq：equal（等于）== lt：less than（小于）&lt; le：less equal（小于等于）&lt;= ne：not equal（不等于）!= 这里以th:if为例，其他差不多 用...
Thymeleaf——在不覆盖现有class属性的情况下动态添加CSS class解决方案
无限迭代中......
02-03 3239
问题描述 th:class动态添加CSS class会覆盖现有class属性，导致class较多时，表达式过长。 官方文档 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appending-and-prepending 解决方案 th:classappend：用于在不覆盖现有属性的情况下向元素添加CSS c...
Thymeleaf教程 （六） 设置属性值
mygzs的专栏
09-13 4万+
设置属性值原始表单<form action="subscribe.html"> <fieldset> <input type="text" name="email" /> <input type="submit" value="Subscribe me!" /> </fieldset> </form>我们可以通过th:attr来设置input或者for
thymeleaf html中动态填充thymeleaf html文件
06-09
要在 Thymeleaf HTML 文件中动态填充其他 Thymeleaf HTML 文件的内容，可以使用 Thymeleaf 的 `th:replace` 属性。`th:replace` 属性可以将指定的 HTML 片段替换为另一个 HTML 文件中的内容。 例如，在 `header.html` 文件中定义了一个页面头部的 HTML 片段： ``` <header> <h1>My Website</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> </header> ``` 现在假设我们有一个包含 `header.html` 内容的 Thymeleaf HTML 文件 `layout.html`，并且我们想在另一个 Thymeleaf HTML 文件 `page.html` 中引用 `layout.html`，并将 `header.html` 的内容动态填充到 `layout.html` 中。 可以使用以下代码在 `layout.html` 中定义 `header.html` 的位置： ``` <header th:replace="header.html :: header"></header> ``` 在上面的代码中，`th:replace` 属性指定了要替换的 HTML 片段，并使用双冒号 `::` 操作符引用了 `header.html` 文件中的 `header` 片段。这将使 Thymeleaf 在渲染 `layout.html` 时将 `header.html` 文件中的 `header` 片段动态地替换为 `layout.html` 文件中的相应位置。 最后，在 `page.html` 文件中引用 `layout.html` 文件： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> </head> <body> <div th:replace="layout.html :: content"> <p>This is the content of my page.</p> </div> </body> </html> ``` 在上面的代码中，`th:replace` 属性指定了要替换的 HTML 片段，并使用双冒号 `::` 操作符引用了 `layout.html` 文件中的 `content` 片段。这将使 Thymeleaf 在渲染 `page.html` 时将 `layout.html` 文件中的 `content` 片段动态地替换为 `page.html` 文件中的相应位置，并将 `header.html` 文件中的 `header` 片段动态地填充到 `layout.html` 中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值