Springboot Thymeleaf實現HTML屬性設置
使用Thymeleaf的屬性來設置HTML屬性。
(1)使用th:attr屬性可以修改原來HTML節(jié)點的屬性;
(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”;
開發(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
右鍵查看網頁源代碼,生成的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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- springboot與mybatis整合實例詳解(完美融合)
- 在SpringBoot下讀取自定義properties配置文件的方法
- Spring Boot 日志配置方法(超詳細)
- SpringBoot + Spring Security 基本使用及個性化登錄配置詳解
- 解決springboot MultipartFile文件上傳遇到的問題
- springboot @ConditionalOnMissingBean注解的作用詳解
- springboot項目打成war包部署到tomcat遇到的一些問題
- springboot如何讀取配置文件(application.yml)中的屬性值
- 詳解eclipse下創(chuàng)建第一個spring boot項目
- Spring?Boot?4.0對于Java開發(fā)的影響和前景
相關文章
SpringBoot2使用Jetty容器操作(替換默認Tomcat)
這篇文章主要介紹了SpringBoot2使用Jetty容器操作(替換默認Tomcat),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10java使用短信設備發(fā)送sms短信的示例(java發(fā)送短信)
這篇文章主要介紹了java使用短信設備發(fā)送sms短信的示例(java發(fā)送短信),需要的朋友可以參考下2014-04-04Springboot如何設置過濾器及重復讀取request里的body
這篇文章主要介紹了Springboot如何設置過濾器及重復讀取request里的body,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03collection集合體系與并發(fā)修改異常的解決方法
今天小編就為大家分享一篇關于collection集合體系與并發(fā)修改異常的解決方法,小編覺得內容挺不錯的,現在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-03-03spring?boot集成smart-doc自動生成接口文檔詳解
這篇文章主要介紹了spring?boot集成smart-doc自動生成接口文檔詳解,smart-doc是一款同時支持java?restful?api和Apache?Dubbo?rpc接口文檔生成的工具,smart-doc顛覆了傳統類似swagger這種大量采用注解侵入來生成文檔的實現方法2022-09-09