Thymeleaf常用语法:HTML属性设置
2019-10-17 09:04:00来源:博客园 阅读 ()
使用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>
原文链接:https://www.cnblogs.com/gdjlc/p/11688981.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 04.Java基础语法 2020-06-11
- Java基础语法菜鸟教程笔记 2020-06-10
- Java 必须掌握的 12 种 Spring 常用注解! 2020-06-08
- JAVA中常用的类 2020-06-05
- (易忘篇)java基本语法难点2 2020-06-03
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash