使用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. Windows密码获取和破解(初探)

    Windows密码获取和破解 本文只是简单的讲明密码获取和破解 具体的操作细节均以模糊或具体代码混淆等方式避开 如有兴趣请自行研究,本文不做细说~~~ 获取思路: Windows密码一般是以" ...

  2. 去除TextView设置lineSpacingExtra后，最后一行多出的空白

    转载请标明出处:https://www.cnblogs.com/tangZH/p/11985745.html 有些手机中,给TextView设置lineSpacingExtra后会出现最后一行的文字也 ...

  3. SpringAOP中切入点的高级使用

    上一篇 SpringAOP之使用切入点创建通知 SpringAOP中切点的高级使用 一.使用控制流切入点(ControlFlowPointcut) 什么是控制流切入点呢?看下面的代码(为了方便,就写进 ...

  4. linux查看磁盘及文件夹大小命令

    https://www.runoob.com/w3cnote/linux-view-disk-space.html 1.使用lsof查看已删除但未释放的文件 lsof -n | grep delete ...

  5. WebShell代码分析溯源(十)

    WebShell代码分析溯源(十) 一.一句话变形马样本 <?php $e = $_REQUEST['e'];register_shutdown_function($e, $_REQUEST[' ...

  6. 【Cef编译】 CefSharp编译失败，检测到“RuntimeLibrary”的不匹配项: 值“MT_StaticRelease”不匹配值“MD_DynamicRelease”

    编译CefSharp生成后一个libcef_dll_wrapper.lib时,供CefSharp使用.结果CefSharp编译的时候报错.遇到以下异常: libcef_dll_wrapper.lib( ...

  7. Android几种多渠道打包

    1.什么是多渠道打包 在不同的应用市场可能有不同的统计需求,需要为每个应用市场发布一个安装包,这里就引出了Android的多渠道打包.在安装包中添加不同的标识,以此区分各个渠道,方便统计app在市场的 ...

  8. MySQL数据库：group分组

    group by:分组 GroupBy语句从英文的字面意义上理解就是"根据(by)一定的规则进行分组(Group)".它的作用是通过一定的规则将一个数据集划分成若干个小的区域,然后 ...

  9. 将Excel表结构导入到Powerdesigner

    我们经常会在excel中设计整理表结构,整理完需要导入到Powerdesigner中,可以通过以下脚本来实现快速,具体操作方法: 打开PowerDesigner,新建模型,点击Tools|Execut ...

  10. poi创建excel文件

    package com.mozq.sb.file01.test; import org.apache.poi.hssf.usermodel.*; import org.apache.poi.hssf. ...