如何根据th:if的不同条件,使用不同的style
时间: 2024-05-16 22:12:57 浏览: 13
可以使用Thymeleaf的“conditional expressions”来实现这一目标。以下是一个示例:
```html
<div th:if="${condition1}" th:class="${'class1'}">
<!-- content -->
</div>
<div th:if="${condition2}" th:class="${'class2'}">
<!-- content -->
</div>
```
在上面的示例中,我们使用了Thymeleaf的`th:if`指令来检查两个不同的条件`condition1`和`condition2`。如果条件成立,指令后面的代码块将被渲染。同时,我们还使用了`th:class`指令来为不同的代码块分别设置类样式。如果第一个条件成立,将会为代码块添加`class1`类样式,如果第二个条件成立,将会为代码块添加`class2`类样式。
你可以根据实际需要修改这些样式名。同时,你也可以使用其他的`th:`前缀指令来设置不同的属性,例如`th:style`来设置不同的样式属性。
相关问题
th:style使用条件表达式
在使用th:style属性时,可以通过条件表达式来动态设置样式。
例如,假设有一个变量isError表示是否出现错误,可以根据这个变量来设置样式:
```
<div th:style="${isError} ? 'color:red;' : 'color:green;'">这是一段文本</div>
```
在上述例子中,如果变量isError为true,则设置文本颜色为红色,否则设置为绿色。条件表达式中的问号表示if,冒号表示else。
除了简单的三目表达式外,还可以使用复杂的表达式,例如使用逻辑运算符、比较运算符等。示例如下:
```
<div th:style="${isError} ? 'color:red;font-weight:bold;' : 'color:green;' + ${fontSize} + 'px'">这是一段文本</div>
```
在上述例子中,如果isError为true,则设置文本颜色为红色、字体加粗,并且字体大小为变量fontSize的值,否则设置文本颜色为绿色,并且字体大小为变量fontSize的值。注意在表达式中使用加号来连接不同的样式属性。
上一段代码中 th:if 都不符合条件 为什么 th:disabled="${true}" 会生效?
在你提供的代码中,`th:disabled`属性被设置为`${true}`,这意味着它的值将始终为`true`,无论`th:if`表达式的条件是否成立。因此,即使`th:if`表达式的条件不成立,`th:disabled`属性仍然会被设置为`true`,因此文本框将被禁用。
需要注意的是,如果你将`th:disabled`属性设置为`${false}`,或者不设置`th:disabled`属性,那么即使`th:if`表达式的条件不成立,文本框仍然会启用。这是因为HTML规范中规定,如果`disabled`属性的值为`false`或为空,那么元素将启用。
因此,如果你想确保`th:disabled`属性的值取决于`th:if`表达式的条件,你可以使用以下代码:
```
<textarea name="drawDescribed" id="drawDescribed"
th:text="${spotCheck.drawDescribed}"
class="form-control" style="resize: none;"
rows="5" maxlength="512" placeholder="必填,最大限制512字符"
th:if="${currentProcess == null or currentProcess.userId != userId or currentProcess.currentNode != 106}"
th:disabled="${currentProcess != null and currentProcess.userId == userId and currentProcess.currentNode == 106}">
</textarea>
```
在这个修正后的代码中,`th:disabled`属性的值取决于`th:if`表达式的条件。如果`th:if`表达式的条件不成立,`th:disabled`属性的值将为`false`,文本框将启用。如果`th:if`表达式的条件成立,`th:disabled`属性的值将取决于`currentProcess`对象的属性值。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<th:block th:if="${list.status == 0}"> 空闲 </th:block> <th:block th:if="${list.status == 1}"> 使用中 </th:block> <th:block th:if="${list.status == 0}"> <button type="button">存入</button> </th:block> <th:block th:if="${list.status == 1}"> <button disabled="disabled" style="background-color: #DDDDDD;">存入</button> </th:block>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)