使用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. Entity Framework Core Code First 项目实践

    Entity Framework Core Code First 实践 任何一种技术的出现都是为了解决一系列特定的问题,只有了解了技术所要解决的关键问题,才能理解它的真正用途,之后,才能在实践中用好它 ...

  2. activiti web流程设计器 工作流的 整合视频教程 SSM和独立部署

    本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...

  3. JavaScript 日期格式

    有四种 JavaScript 日期输入格式: 类型 实例 ISO 日期 "2018-02-19" (国际标准) 短日期 "02/19/2018" 或者 &quo ...

  4. 利用openssl自建CA体系

    使用 OpenSSL 创建私有 CA:1 根证书 使用 OpenSSL 创建私有 CA:2 中间证书 使用 OpenSSL 创建私有 CA:3 用户证书 今天跟着上面的三部曲,做了一下openssl的 ...

  5. Python 函数和类

    python作为一个面向对象的语言,也有类似java等面向对象语言相同的数据结构(class)的定义,和代码块数据结构定义"函数".为了极大可能的简化代码调用逻辑和书写规则,pyt ...

  6. QT--动态人流量监测系统

    QT--动态人流量监测系统 简介: 本项目使用了百度AI的动态人流量监测api,以人体头肩为主要识别目标,适用于低空俯拍,出入口场景,可用于统计当前图像的锁定人数和经过的人数 项目功能 本项目分为相机 ...

  7. Data Guard：Oracle 12c –新增和更新的功能 (Doc ID 1558256.1)

    Data Guard: Oracle 12c – New and updated Features (Doc ID 1558256.1) APPLIES TO: Oracle Database - E ...

  8. [Go] 解决golang.org模块无法下载的问题

    使用GOPROXY环境变量解决proxy.golang.org无法访问问题 在/etc/profile中增加 export GOPROXY=https://goproxy.cn windows下使用 ...

  9. 20182320《Program Design and Data Structures》Learning Summary Week9

    20182320<Program Design and Data Structures>Learning Summary Week9 1.Summary of Textbook's Con ...

  10. mysql 事务四要素杂谈

    事务四要素 对于数据库来说,并发性和准确性是数据库需要权衡的两个点. 类似于我们的应用系统,又要要性能还要要准确. 数据准确性这一条来说,最好的控制就是串行化,都别急,一个一个来.这样数据就没问题了. ...