JavaScript 改變 HTML 樣式

JavaScript 改變 HTML 樣式的核心是通過操作 DOM 元素的 CSS 屬性或 類名 實現動態視覺效果。以下是具體方法與場景解析：

---

一、直接修改元素的 style 屬性

通過 DOM 元素的 style 屬性直接設置內聯樣式，優先級最高：

// 修改單個樣式 
document.getElementById("box").style.color = "blue"; // 修改多個樣式（推薦使用 cssText）
document.getElementById("box").style.cssText = "width: 200px; height: 100px;";

• 適用場景：簡單、臨時的樣式調整（如點擊按鈕改變顏色）。
• 注意：屬性名需使用駝峰寫法（如 backgroundColor 而非 background-color）。

---

二、通過類名（className/classList）切換樣式

1. className 屬性

直接替換元素的類名，適合整體樣式切換：

element.className = "new-class"