Thymeleaf 動態改變頁面元素樣式

1、需求背景

在使用 Thymeleaf 模版使用，如何根據後端返回的值進行判斷，來動態改變頁面元素的樣式？

2、解決方法

使用 th:classappend 屬性，用於在元素上添加CSS類或樣式片段而不覆蓋現有屬性：

<div class=""th:classappend="${status==0} ? 'bg1' : 'bg2' "></div>

.bg1{
      background-color: #ddd
    }

.bg2{
      background-color: #333
    }

按照上述用法，如果 status 等於 0 就添加 bg1 樣式否則就添加 bg2 樣式。

3、總結

 用起來很簡單，如果不清楚使用語法請查看 Thymeleaf 官方文檔 自學下就好了。

自學參考資料：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appending-and-prepending