使用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. docker快速部署本地项目到服务器（tomcat8+mysql8）

    目标是:将本地运行的spring项目,部署到服务器上 为什么使用docker? 环境隔离 服务器上,各种环境交杂,使用docker,能清楚的把各个项目进行隔离,不单维护的人员方便,也会省去很多维护这些 ...

  2. ORA-07217 environment variable cannot be evaluated

    问题描述:还是rman的问题,一个很沙雕的问题,改了半天,准备是要做数据库的全备,和归档的备份 1.连接rman进行备份,这里要保持数据库为mount状态,因为要对数据库全备 [oracle@orcl ...

  3. CentOS下 安装 Nginx

    官方文档:https://nginx.org/en/linux_packages.html#RHEL-CentOS 安装环境:Linux 服务器 CentOS 7.3.Root 权限 1.Instal ...

  4. CentOS7环境下安装docker

    操作系统 : CentOS7.5.1804_x64 docker版本: docker-ce-18.06.3 准备环境 1.如之前安装过移除老旧版本 yum remove docker docker-c ...

  5. Css里的box-shadow的值分别代表什么

    以下为例: box-shadow:1px 2px 3px 4px color inset; 1px:表示沿x轴的正方向的长度(如果是负数,则为沿x轴的负方向的长度); 2px:表示沿y轴的正方向的长度 ...

  6. react + typescript 学习

    react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...

  7. asp.net MVC 在Controller控制器中实现验证码输出

    asp.net mvc项目使用到验证码,为了让以前的WebForm代码能利用上代码经过稍微的改动即可使用代码如下: using System; using System.Collections.Gen ...

  8. 剑指offer笔记面试题6----从未到头打印链表

    题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值.链表节点定义如下: struct ListNode{ int m_nKey; ListNode* m_pNext; } 测试用例: 功能测 ...

  9. Github访问速度很慢的原因，以及解决方法

    1,CDN,Content Distribute Network,可以直译成内容分发网络,CDN解决的是如何将数据快速可靠从源站传递到用户的问题.用户获取数据时,不需要直接从源站获取,通过CDN对于数 ...

  10. 给spark submit main传递参数

    https://www.jianshu.com/p/1d41174441b6 注意传递过去的默认是string,如果修改只能在代码中修改