本篇文章目錄

1. 前言：讓 UI 自己會說話 —— 視覺化健康狀態 Badge
2. 原生 JS 樣式控制：element.className vs element.classList
3. 實戰切版：馬卡龍三色 Badge 標籤 CSS 設計 (.badge-green, .badge-yellow, .badge-red)
4. 邏輯綁定：根據 BMI 區間動態切換標籤文字與顏色
5. 結語

一、 前言：讓 UI 自己會說話 —— 視覺化健康狀態 Badge

當使用者算出 BMI 為 22.5 時，光看數字可能感受不深；但如果旁邊顯示著一個寫著「健康體位」的可愛綠色膠囊標籤 (Badge)，整個介面的可讀性與質感就會瞬間提升！

今天我們將學習如何透過 JavaScript 判斷 BMI 數值區間，同時使用 textContent 更新提示文字，並透過 className 動態替換標籤的 CSS 樣式。

二、 原生 JS 樣式控制：className 的使用技巧

在控制 DOM 元件的視覺外觀時，直接用 JS 修改內聯樣式（如 style.color = "red"）容易讓程式碼變得混亂且難以維護。最好的作法是將顏色與圓角樣式交給 CSS 定義，JS 只負責切換類別名稱 (Class)：

• element.className = "..."：直接設定或覆蓋該 DOM 元素的所有 Class 名稱。當你需要一次重置並套用全新樣式組合時（例如從 .badge-yellow 直接換成 .badge-green），使用 className 是最快且最簡潔的做法！

三、 實戰切版：馬卡龍三色 Badge 標籤 CSS

首先在 CSS 中，我們為 Badge 標籤寫好基礎圓角樣式與馬卡龍三原色：

/components.css

四、 邏輯綁定：根據 BMI 區間切換 Badge

接續 Day 11 的 DOM 選取，我們透過 if...else if...else 判斷衛福部定義的 BMI 門檻，並一口氣更新文字與 Class：

/tool1-calculator.js

程式碼亮點解析：

1. 一石二鳥的同步更新：在同一個判斷分支中，同時完成「文字內容 (textContent)」與「視覺外觀 (className)」的賦值。
2. className 的覆蓋特性：寫入 className = "badge badge-green" 會自動覆蓋掉上一次計算時留下的舊 Class（例如 .badge-red），完全不需要手動寫繁瑣的 .classList.remove()

五、 結語

透過 className 與馬卡龍色彩系統的結合，我們的 Tool 1 現在不僅能精準計算數據，還能給予使用者溫和且直覺的視覺回饋。

在明天的 [Day 13] 中，我們將進行 [Tool 1 防呆與總結]，針對輸入框邊界條件進行終極檢查，並對我們的第一個核心工具做完整的成果回顧與技術總覽！