springboot 使用thymeleaf属性设置html属性

KLQ 2020-07-30 14:36:13 java常见问答 5520

下面的文章要给大家分享的是springboot 使用thymeleaf属性设置html属性的相关内容,文章中有非常详细的设置过程,一起来了解一下吧。

使用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>
    
    <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>

以上的内容你都了解了吗?请继续关注奇Q工具网吧,有更多和springboot以及java构架师的知识可以为你分享。

推荐阅读:

springboot整合mybatis如何实现?特点有哪些?

springboot是什么框架?优点有哪些?

SpringBoot底层实现原理是什么?它的概念又是什么?