網頁

▼

2021/5/29

Thymeleaf th:styleappend 附加 CSS style

Thymeleaf模板頁面使用th:styleappend在HTML標籤既有的style屬性值額外附加其他CSS style。


參考「Spring Boot Thymeleaf 簡單範例」的hello.html並修改如下。

hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Hello Thymeleaf</title>
</head>
<body>
    <p th:text="'Hello, ' + ${name} + '!'"
       style="color:blue;"
       th:styleappend="${name.length() gt 5} ? 'background-color:yellow;' : 'background-color:orange;'"/>
</body>
</html>

<p>標籤現有style="color:blue;"屬性值，使用th:styleappend並判斷name的長度是否大於5，是則附加background-color:yellow;，反之附加 background-color:orange;。

所以當name長度超過5時，返回的html為：

<p style="color:blue; background-color:yellow;">Hello, ...!</p>

反之為

<p style="color:blue; background-color:orange;">Hello, ...!</p>

沒有留言:

張貼留言