Tymeleaf common syntax: HTML attribute settings

Keywords: Java Attribute Thymeleaf Spring

Use the properties of Thymeleaf to set HTML properties.
(1) the th:attr attribute can be used to modify the attributes of the original HTML node.
(2) th:attr attribute can set multiple attributes at the same time;
(3) each HTML attribute has a corresponding Thymeleaf attribute, for example, th:attr="value = 'value'" can be replaced by th:value = "value"
(4) the HTML type is checkbox, readonly, required, disabled, and the Thymeleaf attribute can be written as th:checked="true/false".
(5) using th: attappend and th: attrpappend to add data after or before HTML attribute respectively;
(6) use th:styleappend and th:classappend to add styles to the original style and class attributes respectively;
(7) HTML 5 custom attributes are prefixed with "data -" and Thymeleaf also supports custom attributes. For example, "data th text" can be used instead. "th:text", use "data th each" instead of "th:each";

Development environment: IntelliJ idea February 2, 2019
Spring Boot version: 2.1.8

Create a new Spring Boot project named demo.

1,pom.xml
Join Thymeleaf dependency

        <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="Value 1" th:value="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");
        //Obtain HTML5 There are two methods of attribute value, using dataset If the name is hyphenated, it needs to be humped.
        var s = obj.dataset.personName + "," + obj.getAttribute("data-age");
        alert(s);
    </script>

</form>

</body>
</html>

Browser access: http://localhost:8080

Page popup: lc,30
Right click to view the source code of the web page. The generated HTML source code:

<!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="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");
        //Obtain HTML5 There are two methods of attribute value, using dataset If the name is hyphenated, it needs to be humped.
        var s = obj.dataset.personName + "," + obj.getAttribute("data-age");
        alert(s);
    </script>

</form>

</body>
</html>

Posted by djdog.us on Wed, 16 Oct 2019 11:51:41 -0700

Programmer Group

Tymeleaf common syntax: HTML attribute settings

Hot Keywords