Springboot Thymeleaf實(shí)現(xiàn)HTML屬性設(shè)置
使用Thymeleaf的屬性來設(shè)置HTML屬性。
（1）使用th:attr屬性可以修改原來HTML節(jié)點(diǎn)的屬性；
（2）th:attr屬性可以同時(shí)設(shè)置多個(gè)屬性；
（3）每一個(gè)HTML屬性都有對(duì)應(yīng)的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
新建一個(gè)名稱為demo的Spring Boot項(xiàng)目。
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方式時(shí)，如果名稱帶連字符則使用時(shí)需駝峰化
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方式時(shí)，如果名稱帶連字符則使用時(shí)需駝峰化
var s = obj.dataset.personName + "," + obj.getAttribute("data-age");
alert(s);
</script>
</form>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- springboot與mybatis整合實(shí)例詳解(完美融合)
- 在SpringBoot下讀取自定義properties配置文件的方法
- Spring Boot 日志配置方法(超詳細(xì))
- SpringBoot + Spring Security 基本使用及個(gè)性化登錄配置詳解
- 解決springboot MultipartFile文件上傳遇到的問題
- springboot @ConditionalOnMissingBean注解的作用詳解
- springboot項(xiàng)目打成war包部署到tomcat遇到的一些問題
- springboot如何讀取配置文件（application.yml）中的屬性值
- 詳解eclipse下創(chuàng)建第一個(gè)spring boot項(xiàng)目
- Spring?Boot?4.0對(duì)于Java開發(fā)的影響和前景
相關(guān)文章
這篇文章主要介紹了淺談Mybatis樂觀鎖插件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
SpringBoot2使用Jetty容器操作(替換默認(rèn)Tomcat)
這篇文章主要介紹了SpringBoot2使用Jetty容器操作(替換默認(rèn)Tomcat)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Java中常見的4種限流算法詳解,FixedWindowRateLimiter 類表示一個(gè)固定窗口限流器,使用 limit 和 interval 參數(shù)分別表示限制請(qǐng)求數(shù)量和時(shí)間間隔,缺點(diǎn)是短時(shí)間內(nèi)可能會(huì)流量翻倍,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了mybatis批量新增、刪除、查詢和修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-09-09
java使用短信設(shè)備發(fā)送sms短信的示例(java發(fā)送短信)
這篇文章主要介紹了java使用短信設(shè)備發(fā)送sms短信的示例(java發(fā)送短信),需要的朋友可以參考下2014-04-04
Spring Bean生命周期之Bean的實(shí)例化詳解
這篇文章主要為大家詳細(xì)介紹了Spring Bean生命周期之Bean的實(shí)例化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
Springboot如何設(shè)置過濾器及重復(fù)讀取request里的body
這篇文章主要介紹了Springboot如何設(shè)置過濾器及重復(fù)讀取request里的body，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
JDK基于CAS實(shí)現(xiàn)原子類盤點(diǎn)解析
這篇文章主要為大家介紹了JDK基于CAS實(shí)現(xiàn)原子類盤點(diǎn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
collection集合體系與并發(fā)修改異常的解決方法
今天小編就為大家分享一篇關(guān)于collection集合體系與并發(fā)修改異常的解決方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-03-03
spring?boot集成smart-doc自動(dòng)生成接口文檔詳解
這篇文章主要介紹了spring?boot集成smart-doc自動(dòng)生成接口文檔詳解，smart-doc是一款同時(shí)支持java?restful?api和Apache?Dubbo?rpc接口文檔生成的工具，smart-doc顛覆了傳統(tǒng)類似swagger這種大量采用注解侵入來生成文檔的實(shí)現(xiàn)方法2022-09-09