使用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. mysql-5.7.21-winx64安装教程

    1 . 下载对用的版本信息 地址是:https://dev.mysql.com/downloads/mysql/ 2 . 解压到目录 D:\tools\mysql\mysql-5.7.21-winx6 ...

  2. 【Linux 命令】cp 命令详解

    Linux 命令之 cp 命令详解 一.cp 命令简介 cp 命令主要用于复制文件或目录.即用来将一个或多个源文件或者目录复制到指定的目的文件或目录. cp 命令可以将单个源文件复制成一个指定文件名的 ...

  3. 一致性hash算法--负载均衡

    有没有好奇过redis.memcache等是怎么实现集群负载均衡的呢? 其实他们都是通过一致性hash算法实现节点调度的. 讲一致性hash算法前,先简述一下求余hash算法: hash(object ...

  4. Angular + Leaflet 实现房源数据可视化(附github源码)

    这是什么?租房信息展示平台 宏观的租房数据可视化微观的房源信息展示多条件搜索等等 链接地图搜租房​ 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的 ...

  5. Effect:Mobile ocd

    Satisfy the following two Keep your phone at all times Check your phone even if there's no news Alwa ...

  6. 《精通Python爬虫框架Scrapy》学习资料

    <精通Python爬虫框架Scrapy>学习资料 百度网盘:https://pan.baidu.com/s/1ACOYulLLpp9J7Q7src2rVA

  7. 地图 SDK 系列教程-在地图上展示指定区域（转载）

    腾讯位置服务地图SDK是一套提供多种地理位置服务的应用程序接口.通过调用该接口,开发者可以在自己的应用中加入地图相关的功能(如地图展示.标注.绘制图形等),轻松访问腾讯地图服务和数据,构建功能丰富.交 ...

  8. 线上cpu使用率过高解决方案

    一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环. 下面我们将一步步定位问题,详尽的介绍每一步骤的相关知识. 一.通过top命令定位占用cpu高的进程 执行top命令得到 ...

  9. kubernetes搭建（可访问外网环境部署）

    版权声明:本文为博主原创文章,支持原创,转载请附上原文出处链接和本声明. 本文链接地址:https://www.cnblogs.com/wannengachao/p/11947621.html 一.前 ...

  10. Node.js实现图片上传功能

    node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...