th:style使用条件表达式
时间: 2023-08-02 17:06:58 浏览: 47
在使用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`对象的属性值。
<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 || currentProcess.userId != userId || currentProcess.currentNode != 106}" th:disabled="${true}"> </textarea>为什么th:if会不生效?
根据你提供的代码,`th:if`表达式的条件部分似乎不完整。在你提供的代码中,条件部分以`||`符号结尾,但是后面没有指定条件的值。条件部分应该是一个完整的布尔表达式,它的值将决定元素是否呈现在页面中。
如果你想要让`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="${true}">
</textarea>
```
在这个修正后的代码中,`th:if`表达式的条件部分是完整的,并且使用了`or`关键字来表示逻辑“或”操作。注意,这个修正后的代码中还做了一些空格和格式上的调整,这是为了让代码更易读和更易于维护。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.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)
![](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)