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

Thymeleaf: how to use conditionals to dynamically add/remove a CSS class

提问by vdenotaris

By using Thymeleafas template engine, is it possible to add/remove dynamically a CSS class to/from a simple divwith the th:ifclause?

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

Normally, I could use the conditional clause as follows:

通常，我可以按如下方式使用条件子句：

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

We will be creating a link to the lorem ipsumpage, but only if condition clause is true.

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

I'm looking for something different: I'd like the block to always visible, but with changeable classes according to the situation.

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

采纳答案by nilsi

There is also th:classappend.

还有th:classappend。

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

If isAdminis true, then this will result in:

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

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

回答by Michiel Bijlsma

Yes, it is possible to change a CSS class dynamically according to the situation, but not with th:if. This is done with the elvis operator.

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

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

回答by Fleky

For this purpose and if i dont have boolean variable i use the following:

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

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

回答by lit

Another very similar answer is to use "equals" instead of "contains".

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

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

回答by Charles

Just to add my own opinion, in case it might be useful to someone. This is what I used.

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

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

回答by Adrian Adamczyk

Yet another usage of th:class, same as @NewbLeech and @Charles have posted, but simplified to maximum if there is no "else" case:

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

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

Does not include class attribute if #fields.hasErrors('password') is false.

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

回答by Stephane L

If you just want to append a class in case of an error you can use th:errorclass="my-error-class"mentionned in the doc.

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

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

Applied to a form field tag (input, select, textarea…), it will read the name of the field to be examined from any existing name or th:field attributes in the same tag, and then append the specified CSS class to the tag if such field has any associated errors

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

回答by Shubh

If you are looking to add or remove class accordingly if the url contains certain params or not .This is what you can do

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

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

If the url contains 'home' then active class will be added and vice versa.

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

回答by N Djel Okoye

What @Nilsi mentioned is perfectly correct. However, adminclass and user class need to be wrapped in single quotes as this might fail due to Thymeleaf looking for adminClass or userclass variables which should be strings. That said,

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

it should be: -

它应该是： -

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

or just:

要不就：

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