Springboot Thymeleaf實現(xiàn)HTML屬性設(shè)置

更新時間：2020年04月23日 14:47:41 作者：gdjlc

這篇文章主要介紹了Springboot Thymeleaf實現(xiàn)HTML屬性設(shè)置,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

使用Thymeleaf的屬性來設(shè)置HTML屬性。

（1）使用th:attr屬性可以修改原來HTML節(jié)點的屬性；

（2）th:attr屬性可以同時設(shè)置多個屬性；

（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屬性的后面或前面加入數(shù)據(jù)；

（6）使用th:styleappend和th:classappend分別向原有style、class屬性添加樣式；

（7）HTML5自定義屬性以“data-”作為前綴，Thymeleaf同樣支持自定義屬性，例如可以使用“data-th-text”代替 “th:text”,使用“data-th-each”代替“th:each”；

開發(fā)環(huán)境：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

右鍵查看網(wǎng)頁源代碼，生成的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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: