使用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>

Thymeleaf常用语法：HTML属性设置的更多相关文章

  1. Thymeleaf常用语法：表达式语法之运算符

    Thymeleaf表达式语法之常量分为字符串常量.数字常量.布尔值常量.空值常量:运算符分为算术运算符.关系运算符.条件运算符.无操作符. 开发环境:IntelliJ IDEA 2019.2.2Spr ...

  2. 1-9springboot之thymeleaf常用语法（html页面）

    一.引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> 在html中引入此命名空间,可避免编辑器出现html验证错误,虽 ...

  3. Linux gcc支持的语法 __attribute__ 属性设置

    __attribute__实际上是gcc专有的一种语法,是用来设置函数属性.变量属性.类属性的 语法:之前在C中的结构体对齐中提到过,当时是用来告诉编译器这个结构体的对齐方式 ,其实他还有很多种用法, ...

  4. thymeleaf常用语法

    常用标签语法:①th:text<span th:text="${name}">1</span>注释:如果${name}有值则将替换掉1的值,若无则为1 ②t ...

  5. Thymeleaf常用语法：模板片断

    系统中的很多页面有很多公共内容,例如菜单.页脚等,这些公共内容可以提取放在一个称为“模板片断”的公共页面里面,其它页面可以引用这个 “模板片断”内容. 一.模板片断的定义 可以是html标签,也可以使 ...

  6. Thymeleaf常用语法：模板注释

    Thymeleaf模板注释分为标准HTML/XML注释.解析层注释.原型注释三种. 一.注释说明 1.标准HTML/XML注释 直接通过浏览器打开,不显示,Thymeleaf模板引擎解析也不处理,但查 ...

  7. Thymeleaf常用语法：数据延迟加载

    在处理模板时,可以由模板逻辑决定是否加载数据,以提高性能.在Spring Boot控制器中设置数据时,使用LazyContextVariable可以实现这功能. 开发环境:IntelliJ IDEA ...

  8. Thymeleaf常用语法：数据迭代

    Thymeleaf数据迭代使用th:each属性,可以迭代数组.List.Set和Map等,数组.List.Set的迭代方法类似,迭代Map则会得到一个java.util.Map.Entry对象.在迭 ...

  9. Thymeleaf常用语法：条件判断 if、switch case

    if语句条件判断使用th:if,它会判断表达式是否成立,表达式的结果支持boolean.number.character.String及其他类型.满足下面情况,if语句成立:(1) 表达式的结果是数字 ...

随机推荐

  1. 携程PMO--扑克派对，我的估算我做主！

    转自本人运营的公众号“ 携程技术中心PMO”(ID:cso_pmo)     作者简介   Ollie Guan,携程PMO高级项目集经理,负责敏捷总动员及携程技术中心PMO微信公众号运营.上海AUG ...

  2. 64-Weave 如何与外网通信？

    上一节我们学习了 Weave 网络内部如何通信,今天讨论 Weave 如何与外界通信. weave 是一个私有的 VxLAN 网络,默认与外部网络隔离.外部网络如何才能访问到 weave 中的容器呢? ...

  3. oracle性能优化（项目中的一个sql优化的简单记录）

    在项目中,写的sql主要以查询为主,但是数据量一大,就会突出sql性能优化的重要性.其实在数据量2000W以内,可以考虑索引,但超过2000W了,就要考虑分库分表这些了.本文主要记录在实际项目中,一个 ...

  4. 编译安装基于 fastcgi 模式的多虚拟主机的wordpress和discuz的LAMP架构

    目录 实现CentOS 7 编译安装基于 fastcgi 模式的多虚拟主机的wordpress和discuz的LAMP架构 准备环境: 准备软件版本: 主机名修改用以区分 数据库服务器 实现数据库二进 ...

  5. CodeForces - 158C（模拟）

    题意 https://vjudge.net/problem/CodeForces-158C 你需要实现类似 Unix / Linux 下的 cd 和 pwd 命令. 一开始,用户处于根目录 / 下. ...

  6. ElementUI table 点击编辑按钮进行编辑实现示例

    <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta nam ...

  7. Java网络爬虫 HttpClient

    简介 : HttpClient是Apache Jakarta Common下的子项目,用于提供高效的,功能丰富的支持HTTP协议的客户编程工具包,其主要功能如下: 实现了所有HTTP的方法 : GET ...

  8. Windows服务安装批处理命令

    Install.bat: @echo off "%~dp0InstallUtil\InstallUtil.exe" "%~dp0DataSyncService.exe&q ...

  9. 「SAP技术」A项目关联公司间退货STO流程

    [SAP技术]A项目关联公司间退货STO流程 1)创建公司间退货STO单据. 如下图示的公司间退货STO 4500000572, 2),VL10B, 创建交货单. 如下图交货单号:80044918, ...

  10. iOS引导页（开局滚动效果）

    参考链接1:https://jingyan.baidu.com/article/4dc40848a341dfc8d846f152.html 参考链接2:https://www.cnblogs.com/ ...