Thymeleaf如何将Spring Boot传递的变量应用到内部CSS属性中

实现方案 #

Thymeleaf支持CSS内联表达式，你只需要做两处修改即可实现需求：

1. 给<style>标签添加th:inline="css"属性，启用Thymeleaf对CSS块的表达式解析能力
2. 把需要插入user.result的位置用[[${变量名}]]语法包裹，Thymeleaf渲染页面时会自动把后端传递的变量值替换到对应位置

完整可运行代码如下：

<style th:inline="css">
        @keyframes width {
            0% {
                width: 0%;
            }

            100% {
                  width: [[${user.result}]]%;
            }
        }
</style>

补充说明 #

• 请确保后端传递的user.result是合法的数字类型，避免生成无效的CSS属性值导致动画不生效
• 如果你需要对值做二次处理，可直接在内联表达式中编写运算逻辑，例如[[${user.result * 0.9}]]%即可将原始值乘以0.9后再渲染为百分比

内容的提问来源于stack exchange，提问作者Manoj Rawat