blocks|key|2945581|text|还有th:classappend。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2945582|<a+href=""+class="baseclass"+th:classappend="${isAdmin}+?+adminclass+:+userclass"></a>|code-block|syntax|javascript|2945583|如果isAdmin为true，则这将导致：|2945584|<a+href=""+class="baseclass+adminclass"></a>|2945585|entityMap^0|2|E|0|0|2|7|A|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

There is also <code>th:classappend</code>.

<pre><code>&lt;a href="" class="baseclass" th:classappend="${isAdmin} ? adminclass : userclass"&gt;&lt;/a&gt;
</code></pre>

If <code>isAdmin</code> is <code>true</code>, then this will result in:

<pre><code>&lt;a href="" class="baseclass adminclass"&gt;&lt;/a&gt;
</code></pre>

blocks|key|2945561|text|是的，可以根据情况动态更改CSS类，但不能使用th:if。这是通过elvis+operator完成的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2945562|<a+href="lorem-ipsum.html"+th:class="${isAdmin}?+adminclass+:+userclass">Lorem+Ipsum</a>+|code-block|syntax|javascript|2945563|entityMap|0|LINK|mutability|MUTABLE|url|http://www.thymeleaf.org/doc/usingthymeleaf.html#default-expressions-elvis-operator^0|N|5|X|E|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

Yes, it is possible to change a CSS class dynamically according to the situation, but not with <code>th:if</code>. This is done with the <a href="http://www.thymeleaf.org/doc/usingthymeleaf.html#default-expressions-elvis-operator" rel="noreferrer">elvis operator</a>.

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

blocks|key|2945614|text|为了达到这个目的，如果我没有布尔型变量，我会使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2945615|<li+th:class="${#strings.contains(content.language,'CZ')}+?+active+:+''">|code-block|syntax|javascript|2945616|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>&lt;li th:class="${#strings.contains(content.language,'CZ')} ? active : ''"&gt;
</code></pre>

blocks|key|2733058|text|另一个非常相似的答案是使用"equals“而不是"contains”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2733059|<li+th:class="${#strings.equals(pageTitle,'How+It+Works')}+?+active+:+''">|code-block|syntax|javascript|2733060|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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



<pre class="lang-html prettyprint-override"><code>&lt;li th:class="${#strings.equals(pageTitle,'How It Works')} ? active : ''"&gt;
</code></pre>

blocks|key|2945800|text|如果你只是想在出错的情况下追加一个类，你可以使用the+doc中提到的th:errorclass="my-error-class"。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2945801|<input+type="text"+th:field="*{datePlanted}"+class="small"+th:errorclass="fieldError"+/>|code-block|syntax|javascript|2945802|应用于表单域标记的输入(input、select、文本区…)，它将从同一标记中的任何现有name或th:field属性中读取要检查的字段的名称，然后如果该字段有任何关联的错误，则将指定的CSS类附加到该标记。|2945803|entityMap|0|LINK|mutability|MUTABLE|url|http://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#simplifying-error-based-css-styling-therrorclass^0|Z|U|O|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

If you just want to append a class in case of an error you can use <code>th:errorclass="my-error-class"</code> mentionned in <a href="http://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#simplifying-error-based-css-styling-therrorclass" rel="nofollow noreferrer">the doc</a>.

<pre><code>&lt;input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" /&gt;
</code></pre>

<blockquote>
 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
</blockquote>

blocks|key|153059|text|只是补充一下我自己的观点，以防对某些人有用。这就是我使用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|153060|<div+th:class="${request.read+?+'mdl-color-text--grey-800+w500'+:+''}">+</div>|code-block|syntax|javascript|153061|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

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

blocks|key|148972|text|th:class的另一种用法，与@NewbLeech和@Charles发布的用法相同，但如果没有"else“情况，则简化到最大值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|148973|<input+th:class="${#fields.hasErrors('password')}+?+formFieldHasError"+/>|code-block|syntax|javascript|148974|如果#fields.hasErrors('password')为false，则不包含类属性。|148975|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>&lt;input th:class="${#fields.hasErrors('password')} ? formFieldHasError" /&gt;
</code></pre>

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

blocks|key|2945847|text|@Nilsi提到的是完全正确的。然而，adminclass和user类需要用单引号括起来，因为这可能会因为Thymeleaf查找adminClass或userclass变量而失败，这些变量应该是字符串。也就是说，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2945848|它应该是：|2945849|+<a+href=""+class="baseclass"+th:classappend="${isAdmin}+?+'adminclass'+:+
+'userclass'">+
+</a>|code-block|syntax|javascript|2945850|或者只是：|2945851|<a+href=""+th:class="${isAdmin}+?+'newclass'+:+
++'baseclass'">+
+</a>|2945852|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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,

it should be: - 

<pre><code> &lt;a href="" class="baseclass" th:classappend="${isAdmin} ? 'adminclass' : 
 'userclass'"&gt; 
 &lt;/a&gt;
</code></pre>

or just:

<pre><code>&lt;a href="" th:class="${isAdmin} ? 'newclass' : 
 'baseclass'"&gt; 
 &lt;/a&gt;
</code></pre>

blocks|key|2945824|text|如果您希望相应地添加或删除类(无论url是否包含某些参数)，则可以使用.This|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2945825|<a+th:href="@{/admin/home}"++th:class="${#httpServletRequest.requestURI.contains('home')}+?+'nav-link+active'+:+'nav-link'"++>|code-block|syntax|javascript|2945826|如果url包含'home‘，那么将添加活动类，反之亦然。|2945827|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

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

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

blocks|key|2733262|text|以防有人在使用Bootstrap，我可以添加多个类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2733263|<a+href=""+class="baseclass"+th:classappend="${isAdmin}+?:+'text-danger+font-italic'+"></a>|code-block|syntax|javascript|2733264|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just in case someone is using Bootstrap, I was able to add more than one class:
<pre><code>&lt;a href=&quot;&quot; class=&quot;baseclass&quot; th:classappend=&quot;${isAdmin} ?: 'text-danger font-italic' &quot;&gt;&lt;/a&gt;
</code></pre>

By using <a href="https://www.google.it/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0CCMQFjAA&amp;url=http%3A%2F%2Fwww.thymeleaf.org%2F&amp;ei=MI7gU6nJDcqp0QWQ5IDACA&amp;usg=AFQjCNEO8zpPJdx9vZOpb_nC-Zdd8gu03Q&amp;sig2=YpHXOZrgN-CgTai_imJrUA&amp;bvm=bv.72197243,d.bGE" rel="noreferrer">Thymeleaf</a> as template engine, is it possible to add/remove dynamically a CSS class to/from a simple <code>div</code> with the <code>th:if</code> clause?

Normally, I could use the conditional clause as follows:

<pre><code>&lt;a href="lorem-ipsum.html" th:if="${condition}"&gt;Lorem Ipsum&lt;/a&gt; 
</code></pre>

<blockquote>
 We will be creating a link to the lorem ipsum page, but only if condition clause is true.
</blockquote>

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

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

通过使用作为模板引擎，是否可以使用th:if子句在简单的div中动态添加/删除CSS类？通常，我可以使用条件子句，如下所示：<a href="lorem-ipsum.html" th:if="${condition}">Lorem Ipsum</a> 我们将创建一个指向lorem ipsum页面的链接，但前提是条件子句为真。我正在寻找一些不同的东西:我希望块总是可见的，但可以根据情况使用可变的类。

问Thymeleaf:如何使用条件动态添加/删除CSS类
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Thymeleaf:如何使用条件动态添加/删除CSS类EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Thymeleaf:如何使用条件动态添加/删除CSS类
EN