如何基于Spring MVC返回的值动态修改按钮颜色？（Spring Boot+Thymeleaf场景）

我看了你的代码，问题主要出在前端Thymeleaf和JavaScript的实现逻辑上，咱们一步步来修正：

原代码存在的核心问题 #

• Thymeleaf类型不匹配：Controller传递的num是int类型，但你在th:switch里用了th:case="'0'"（字符串格式），这会导致匹配逻辑失效。
• 事件绑定错误：div元素本身没有onchange事件，而且你写的onchange="sb"少了函数调用的括号，即便加上也不会触发。
• JavaScript语法错误：getElementId拼写错误（正确是getElementById），另外div没有value属性，无法通过该方式获取值。

方案一：直接用Thymeleaf条件绑定样式（推荐，无需JS） #

这种方式最简洁高效，直接在按钮上通过Thymeleaf的条件表达式动态设置样式或类：

方式1：动态绑定style属性 #

修改index.html里的按钮部分：

<button class="button" id="buttonDemo" 
        th:style="${num == 0} ? 'background-color: green;' : 'background-color: red;'">
    Flag
</button>

方式2：动态切换CSS类（更优雅） #

先新增两个颜色类，再通过Thymeleaf动态追加：

<style>
/* 新增颜色类 */
.btn-green { background-color: green; }
.btn-red { background-color: red; }

/* 保留原有按钮基础样式 */
.button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>

<!-- 按钮部分 -->
<button class="button" 
        th:classappend="${num == 0} ? 'btn-green' : 'btn-red'">
    Flag
</button>

方案二：修正JavaScript实现（适合需要JS逻辑扩展的场景） #

如果一定要用JS处理，可以直接把后端的num值注入到JS中，页面加载时执行判断：

<script>
// 页面加载完成后执行逻辑
window.onload = function() {
    // 用Thymeleaf内联语法直接获取后端传递的num值
    const num = [[${num}]];
    const button = document.getElementById("buttonDemo");
    
    if(num === 1) {
        button.style.backgroundColor = "red";
    } else {
        button.style.backgroundColor = "green";
    }
}
</script>

<!-- 移除无用的colorchange div -->
<div class="container">
<div class="center">
<button class="button" id="buttonDemo">Flag</button>
</div>
</div>

额外小建议 #

你的Service类里的方法名Server()有点歧义，建议改成更语义化的名字（比如getFlagStatus()），提升代码可读性。

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