Springboot Thymeleaf实现HTML属性设置

时间：2021-05-20

使用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;@Controllerpublic 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章