Thymeleaf 的 th:attr 和 th:style 属性的使用

一、th:attr

设置标签属性，多个属性可以用逗号分隔

例：

1.后端接口:

@GetMapping(value = "/welcome")
public ModelAndView getWelcomeTitle() {
    ModelAndView modelAndView = new ModelAndView("welcome.html");
    modelAndView.addObject("attr1", "属性值1");
    modelAndView.addObject("attr2", "属性值2");
    return modelAndView;
  }

2.welcome.html:

只设置一个属性的情况： <p th:attr="attr1=${attr1}"></p>
页面实际解析为：<p attr1="属性值1"></p>
设置多个属性的情况：<p th:attr="attr1=${attr1}, attr2=${attr2} "></p>
页面实际解析为：<p attr1="属性值1" attr2="属性值2"></p>

二、th:style

设置标签样式，多个样式需要拼接

1.后端接口:

@GetMapping(value = "/welcome")
public ModelAndView getWelcomeTitle() {
    ModelAndView modelAndView = new ModelAndView("welcome.html");
    modelAndView.addObject("font-size", "100px");
    modelAndView.addObject("font-weight", "700");
    modelAndView.addObject("font-family", "courier");
    return modelAndView;
  }

2.welcome.html:

只设置一个属性的情况： <p th:style="'font-size:' + ${font-size}"></p>
页面实际解析为： <p th:style="font-size:100px"></p>
设置多个属性的情况: <p th:style="'font-size:' + ${font-size} + '; font-weight:' + ${font-weight}"></p>
页面实际解析为： <p th:style="font-size:100px; font-weight:700"></p>
也可以像这样追加一个：<p th:style="'font-size:' + ${font-size} + ';' + " th:styleappend ="'font-weight:' + ${font-weight}" ></p>
页面实际解析为：<p th:style="font-size:100px; font-weight:700"></p>
也可以像这样追加多个：<p th:style="'font-size:' + ${font-size} + ';'" th:styleappend ="'font-weight:' + ${font-weight} + '; font-family:' + ${font-family}" ></p>
页面实际解析为：<p th:style="font-size:100px; font-weight:700; font-family:courier"></p>

三、参考文档

https://o7planning.org/en/12373/thymeleaf-th-class-th-classappend-th-style-th-styleappend

四、吐槽

后端刚接触 Thymeleaf 不久，今天有个需求是为标签添加多个样式，查了很久才解决。这该死的 th:attr 和 th:style 添加多个属性/样式的方式不一样，真坑！