5.4 追加与前置属性值

Thymeleaf 还提供了 th:attrappend 和 th:attrprepend 两个属性，它们能将表达式的计算结果追加（后缀） 或前置（前缀） 到标签原有属性值的末尾/开头，而非直接覆盖。

比如你希望给按钮追加一个 CSS 类名（不是替换原有类名，只是新增），这个类名存储在上下文变量中，具体值取决于用户之前的操作：

<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />

如果处理模板时 cssStyle 变量的值是 "warning"，最终会生成：

<input type="button" value="Do it!" class="btn warning" />

标准方言中还提供了两个针对性的追加属性：th:classappend 和 th:styleappend，专门用于给元素追加 CSS 类名或样式片段，无需担心覆盖原有值，写法比 th:attrappend 更简洁：

<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">
  <!-- 行内容 -->
</tr>

不用纠结 th:each 属性的含义，它是循环遍历属性，我们后续会详细讲解。这里只需知道：每行都会保留原有 row 类名，且奇数行会额外追加 odd 类名。

核心规则说明

1. th:attrappend / th:attrprepend：通用追加/前置属性，需指定要操作的属性名（如 class），语法为 th:attrappend="属性名=${表达式}"；
2. th:classappend / th:styleappend：专用追加属性，无需指定属性名（默认操作 class/style），直接写表达式即可，是日常开发的首选；
3. 值拼接规范：
   • 追加 CSS 类名时，表达式开头建议加空格（如 ${' ' + cssStyle}），避免类名粘连；
   • 追加样式时，表达式开头建议加分号（如 ';border: red'），符合 CSS 样式的分隔规范。

总结

1. th:attrappend/th:attrprepend 用于通用属性的追加/前置，th:classappend/th:styleappend 是 class/style 的专用简化版；
2. 这类属性的核心是“保留原有值，新增内容”，而非覆盖，适合动态添加样式、类名等场景；
3. 追加内容时需注意加空格/分号，保证 HTML/CSS 语法的合法性。