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>
沒有留言:
張貼留言