Thymeleaf：如何使用条件来动态添加/删除 CSS 类答案

【问题标题】：Thymeleaf: how to use conditionals to dynamically add/remove a CSS classThymeleaf：如何使用条件来动态添加/删除 CSS 类
【发布时间】：2014-09-27 19:40:24
【问题描述】：

通过使用Thymeleaf 作为模板引擎，是否可以使用th:if 子句在简单的div 中动态添加/删除CSS 类？

通常情况下，我可以如下使用条件子句：

<a href="lorem-ipsum.html" th:if="${condition}">Lorem Ipsum</a>

我们将创建一个到 lorem ipsum 页面的链接，但前提是条件子句为真。

我正在寻找不同的东西：我希望该块始终可见，但可以根据情况使用可更改的类。

【问题讨论】：

这个呢stackoverflow.com/questions/35530096/…

标签： java html css spring thymeleaf

【解决方案1】：

还有th:classappend。

<a href="" class="baseclass" th:classappend="${isAdmin} ? adminclass : userclass"></a>

如果isAdmin 是true，那么这将导致：

<a href="" class="baseclass adminclass"></a>

【讨论】：

我认为这应该是公认的答案。 th:class 替换/重写您的类属性。 th:classappend 是你想要的。
或者，您可以将所需的类从控制器注入模型中，然后使用th:classappend="${theRightClass}"
还有一点要记住的是，很遗憾，您不能拥有多个 th:classappend 属性。最多允许一个。 Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
是否没有th:classremove 可以在不影响其他类的情况下删除单个类或在绑定 xml 中对整个类列表进行硬编码？还是关闭任何动态类并有条件地附加唯一的方法？
怎么办，如果需要更改2个以上的类

【解决方案2】：

是的，可以根据情况动态更改 CSS 类，但不能使用 th:if。这是通过elvis operator 完成的。

<a href="lorem-ipsum.html" th:class="${isAdmin}? adminclass : userclass">Lorem Ipsum</a>

【讨论】：

@atilkan：您可以简单地在 Google 上搜索 Elvis 运算符并查看它是三元运算符的变体。甚至维基百科在前几行中也解释了它：en.wikipedia.org/wiki/Elvis_operator

【解决方案3】：

为此，如果我没有布尔变量，我使用以下：

<li th:class="${#strings.contains(content.language,'CZ')} ? active : ''">

【讨论】：

【解决方案4】：

另一个非常相似的答案是使用“等于”而不是“包含”。

<li th:class="${#strings.equals(pageTitle,'How It Works')} ? active : ''">

【讨论】：

【解决方案5】：

如果您只想在出现错误时附加一个类，您可以使用the doc 中提到的th:errorclass="my-error-class"。

<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />

应用于表单字段标签（input、select、textarea...），它将从同一标签中的任何现有名称或th:field属性中读取要检查的字段名称，然后附加指定的CSS类如果此类字段有任何相关错误，则添加到标签

【讨论】：

【解决方案6】：

只是添加我自己的意见，以防它可能对某人有用。这是我用的。

<div th:class="${request.read ? 'mdl-color-text--grey-800 w500' : ''}"> </div>

【讨论】：

【解决方案7】：

th:class 的另一种用法，与@NewbLeech 和@Charles 发布的相同，但如果没有“其他”情况，则简化为最大：

<input th:class="${#fields.hasErrors('password')} ? formFieldHasError" />

如果#fields.hasErrors('password') 为假，则不包括类属性。

【讨论】：

【解决方案8】：

@Nilsi 提到的完全正确。但是，adminclass 和 user class 需要用单引号括起来，因为这可能会由于 Thymeleaf 寻找应该是字符串的 adminClass 或 userclass 变量而失败。也就是说，

应该是：-

 <a href="" class="baseclass" th:classappend="${isAdmin} ? 'adminclass' : 
 'userclass'"> 
 </a>

或者只是：

<a href="" th:class="${isAdmin} ? 'newclass' : 
  'baseclass'"> 
 </a>

【讨论】：

【解决方案9】：

如果您希望相应地添加或删除类，如果 url 包含某些参数。这就是您可以做的

<a th:href="@{/admin/home}"  th:class="${#httpServletRequest.requestURI.contains('home')} ? 'nav-link active' : 'nav-link'"  >

如果 url 包含“home”，则将添加活动类，反之亦然。

【讨论】：

【解决方案10】：

以防万一有人使用 Bootstrap，我可以添加多个类：

<a href="" class="baseclass" th:classappend="${isAdmin} ?: 'text-danger font-italic' "></a>

【讨论】：