如何使用Thymeleaf通过模型值修改HTML元素背景色？

嘿，我来帮你搞定这个背景色不生效的问题！你当前用Thymeleaf表达式直接嵌入原生style属性的写法，有时候会因为模板解析优先级的问题导致不生效，下面给你几个靠谱的解决方案：

方案1：使用Thymeleaf的th:style属性（推荐） #

这是Thymeleaf官方推荐的动态设置样式的方式，能确保表达式被正确解析：

<div class="card" th:style="'width: 18rem; background: ' + ${task.color}" >
</div>

这里我们把静态样式字符串和动态的task.color值做了拼接，Thymeleaf会自动把整个表达式解析成有效的style属性内容，生成最终的HTML。

方案2：修正原生style里的表达式写法 #

如果你坚持要用原生style属性，可以尝试补充分号，同时确保模板引擎能正确识别内联表达式：

<div class="card" style="width: 18rem; background: [[${task.color}]];" >
</div>

不过这种方式偶尔会出现解析异常，所以还是优先选方案1更稳妥。

额外检查点 #

别忘了确认后端传过来的task.color是有效的CSS颜色值，比如#ff0000、red、rgb(255, 0, 0)这类格式。你可以打开页面的开发者工具，查看这个div的最终HTML源码，看看生成的background属性值是不是正确的——如果颜色值本身不对，那肯定不会生效哦。

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