使用Thymeleaf的屬性來設置HTML屬性。 （1）使用th:attr屬性可以修改原來HTML節點的屬性； （2）th:attr屬性可以同時設置多個屬性； （3）每一個HTML屬性都有對應的Thymeleaf屬性，如th:attr="value='值'"可換為th:value="值" （... ...
使用Thymeleaf的屬性來設置HTML屬性。
（1）使用th:attr屬性可以修改原來HTML節點的屬性；
（2）th:attr屬性可以同時設置多個屬性；
（3）每一個HTML屬性都有對應的Thymeleaf屬性，如th:attr="value='值'"可換為th:value="值"
（4）HTML的type為checkbox、readonly、required、disabled的，Thymeleaf屬性可寫為th:checked="true/false"形式；
（5）使用th:attrappend和th:attrprepend分別在HTML屬性的後面或前面加入數據；
（6）使用th:styleappend和th:classappend分別向原有style、class屬性添加樣式；
（7）HTML5自定義屬性以“data-”作為首碼，Thymeleaf同樣支持自定義屬性，例如可以使用“data-th-text”代替
“th:text”,使用“data-th-each”代替“th:each”；
開發環境：IntelliJ IDEA 2019.2.2
Spring Boot版本：2.1.8
新建一個名稱為demo的Spring Boot項目。
1、pom.xml
加入Thymeleaf依賴
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
2、src/main/java/com/example/demo/TestController.java
package com.example.demo; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class TestController { @RequestMapping("/") public String test(){ return "test"; } }
3、src/main/resources/templates/test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form th:id="form1" th:attr="method='post',action=@{/user/save}"> <input type="text" value="值1" th:value="值2" /> <input type="text" th:readonly="true" /> <input type="text" th:disabled="true" /> <input type="checkbox" th:checked="true" /> <input type="checkbox" th:checked="false" /> <div id="div1" th:attrappend="id='-data'" style="text-align: center;" th:styleappend="'color:#ccc'"></div> <div id="div2" th:attrprepend="id='data-'" class="class1" th:classappend="class2"></div> <input id="user" type="text" data-person-name="lc" data-age="30"/> <div data-th-text="hello"></div> <script> var obj = document.getElementById("user"); //獲取HTML5屬性值的2種方式，用dataset方式時，如果名稱帶連字元則使用時需駝峰化 var s = obj.dataset.personName + "," + obj.getAttribute("data-age"); alert(s); </script> </form> </body> </html>
瀏覽器訪問：http://localhost:8080
頁面彈出：lc,30
右鍵查看網頁源代碼，生成的HTML源碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="form1" method="post" action="/user/save"> <input type="text" value="值2" /> <input type="text" readonly="readonly" /> <input type="text" disabled="disabled" /> <input type="checkbox" checked="checked" /> <input type="checkbox" /> <div id="div1-data" style="text-align: center; color:#ccc"></div> <div id="data-div2" class="class1 class2"></div> <input id="user" type="text" data-person-name="lc" data-age="30"/> <div>hello</div> <script> var obj = document.getElementById("user"); //獲取HTML5屬性值的2種方式，用dataset方式時，如果名稱帶連字元則使用時需駝峰化 var s = obj.dataset.personName + "," + obj.getAttribute("data-age"); alert(s); </script> </form> </body> </html>
