JavaScript 操作 CSS 樣式的祕密：CSSStyleDeclaration 完整解析

更新日期： 2025 年 3 月 29 日

當你在網頁上動態改變元素樣式（例如點擊按鈕後讓按鈕變色），其實背後都是 JavaScript 操作元素的 CSS 樣式。

而這一切操作都與一個叫做 CSSStyleDeclaration 的物件息息相關。

CSSStyleDeclaration 是 JavaScript 操作 DOM 元素樣式的核心，它代表一組 CSS 樣式宣告（如 color、width、font-size 等）。

本篇文章將帶你認識 CSSStyleDeclaration 是什麼、如何取得它、有哪些常見用法，並提供實際範例，幫助你將靜態的 HTML 變成互動性十足的網頁。

什麼是 CSSStyleDeclaration？

簡單來說，CSSStyleDeclaration 是一種由瀏覽器內建提供的「介面（Interface）」，在 JavaScript 中它扮演著非常重要的角色，用來描述和管理 HTML 元素上與 CSS 樣式有關的一組屬性和值。

具體來說，「一組 CSS 屬性與其對應的值」指的就是像：

color: red;
font-size: 16px;
background-color: yellow;

這些 CSS 規則背後的資料結構，在 JavaScript 中會被封裝成一個 CSSStyleDeclaration 物件。

你可以想像這個物件就像一個字典（key-value 結構），裡面每一筆資料都是：

• 「CSS 屬性名稱」做為鍵（key）
• 「對應的樣式值」做為值（value）

接續前面的說明，當你透過 JavaScript 存取一個 HTML 元素的 .style 屬性時，拿到的其實就是一個 CSSStyleDeclaration 物件。

這個物件內部就像一個用來儲存 CSS 樣式的字典，讓你可以透過「屬性名稱」來讀取或設定對應的「樣式值」。

📌 實際範例說明

假設你有以下這段 HTML：

<div id="box" style="color: red; font-size: 16px;"></div>

這個 <div> 元素在 HTML 中已經有兩個行內樣式：color 和 font-size。

當你在 JavaScript 中這樣寫：

const element = document.getElementById("box");
console.log(element.style);

你會看到輸出的 element.style 是一個 CSSStyleDeclaration 物件，它看起來就像這樣（簡化過的樣子）：

{
  color: "red",
  fontSize: "16px",
  ...其他屬性
}

你可以像存取物件屬性那樣操作它：

console.log(element.style.color);       // "red"
console.log(element.style.fontSize);    // "16px"

element.style.backgroundColor = "yellow"; // 新增樣式

當你透過 .style 存取的 CSSStyleDeclaration 物件，不僅可以像操作一般物件那樣，用屬性（例如 color 或 fontSize）來讀取與設定樣式。

它本身其實也具備一些內建的方法（methods），讓你可以更細緻地管理 CSS。

這些方法正是因為 CSSStyleDeclaration 是一種介面（Interface），瀏覽器依據這個介面標準提供了特定的功能，讓你可以一致地操作樣式資料。

🔧 除了點語法，它還支援更多進階操作

以下是 CSSStyleDeclaration 常用的三個方法：

🧪 實際範例：

// 設定樣式
element.style.setProperty("margin-top", "20px");

// 取得樣式值
console.log(element.style.getPropertyValue("margin-top")); // → "20px"

// 移除樣式
element.style.removeProperty("margin-top");

這些方法在某些情境中比點語法更彈性。

例如：

• 當你有從 CSS 檔案繼承的樣式但想重新指定
• 當你需要處理 !important
• 當你需要動態傳入樣式屬性名稱（非硬編碼）

這些操作能力，正是因為 CSSStyleDeclaration 是一個「介面」——它定義了一套規則與功能，讓所有現代瀏覽器都能提供一致的樣式讀寫方式。

如何取得 CSSStyleDeclaration？

JavaScript 操作 HTML 元素樣式最直接的方式，就是透過該元素的 .style 屬性。

這個 .style 屬性會回傳一個 CSSStyleDeclaration 物件，代表該元素目前設定的所有「行內樣式（inline styles）」。

📌 範例：

const element = document.getElementById("myDiv");
console.log(element.style); // 輸出一個 CSSStyleDeclaration 物件

假設你的 HTML 長這樣：

<div id="myDiv" style="color: red; font-size: 20px;"></div>

這時 element.style 就會包含兩個屬性：

• element.style.color → "red"
• element.style.fontSize → "20px"

也就是說，element.style 只會反映 HTML 標籤上的 style 屬性內容，也就是行內樣式。不包含外部 CSS 或 <style> 標籤中的樣式，這點非常重要。

CSSStyleDeclaration 的常見操作方式

CSSStyleDeclaration 不只是個儲存樣式的物件，它還能讓我們讀取、設定、移除樣式屬性。以下是最常見的三種操作：

設定樣式屬性（Set）

(1) 使用點語法（dot notation）

這是操作 CSSStyleDeclaration 最常見、也最直覺的方式。

你可以像操作一般物件屬性一樣，使用「點語法」來設定樣式：

element.style.color = "red";
element.style.fontSize = "20px";
element.style.backgroundColor = "yellow";

但在使用這種方式時，有一個非常重要的規則要記得：

👉 CSS 屬性名稱必須使用「駝峰式命名（camelCase）」的寫法，而不是 CSS 原本的短橫線（kebab-case）寫法。

為什麼需要使用駝峰式命名？

在 CSS 中，屬性名稱像是 font-size 或 background-color 都使用「短橫線」作為單字之間的分隔；這種寫法在 CSS 合理，但在 JavaScript 中就不行。

因為 JavaScript 的變數與屬性名稱不允許有短橫線（-），否則會被當成「減號運算子」來解析，造成語法錯誤。

例如：

element.style.font-size = "20px"; // ❌ 錯誤：會被解釋成「element.style.font 減去 size」

為了讓 CSS 屬性名稱能合法地變成 JavaScript 屬性，瀏覽器會自動把這些屬性轉換成 駝峰式命名法（camelCase），也就是：

• 把第一個單字保留小寫
• 後續單字的首字母改成大寫
• 移除短橫線

例如：

因此，正確的寫法應該是：

element.style.fontSize = "20px";       // ✅ 正確
element.style.backgroundColor = "red"; // ✅ 正確

這就是為什麼當你用「點語法」來操作 .style 時，一定要記得使用駝峰式的屬性名稱。

(2) 使用中括號語法（bracket notation）

除了點語法之外，CSSStyleDeclaration 也可以用中括號語法來操作樣式，語法如下：

element.style["屬性名稱"] = 值;

這種方式有兩個主要用途，我們來分別說明。

✅ 用途 1：動態設定樣式屬性名稱（駝峰式）

當你希望根據某個變數動態指定樣式名稱時，就必須使用中括號語法。點語法只能寫死屬性名稱，而中括號可以用變數代入：

const prop = "borderRadius";
element.style[prop] = "10px"; // 等同於 element.style.borderRadius = "10px"

這在處理樣式切換、條件式樣式或撰寫通用函式時非常實用。

⚠️ 需要注意的是：中括號語法仍然只能用駝峰式命名的屬性名稱，也就是說 font-size、margin-top 這類短橫線寫法無法這樣操作：

element.style["margin-top"] = "20px"; // ❌ 無效！這不會被解析為有效樣式屬性

🚫 錯誤迷思：中括號 ≠ 支援短橫線寫法

很多人以為只要改成中括號語法就能使用原始的 CSS 屬性名稱（短橫線），但實際上 element.style["margin-top"] 是 undefined。

因為 .style 是一個 JavaScript 物件，它的屬性名稱早已被轉換成駝峰式（如 "marginTop"）。

✅ 用途 2：如果你真的需要保留短橫線寫法，請使用 setProperty()

如果你的場景需要使用原始 CSS 屬性名稱（像 "margin-top" 或 "background-color"），可以使用 setProperty() 方法：

element.style.setProperty("margin-top", "20px");

這是 CSSStyleDeclaration 提供的官方方法，支援標準 CSS 屬性語法，也支援 !important：

element.style.setProperty("margin-top", "20px", "important");

小結：點語法、中括號語法與 setProperty() 比較

取得樣式屬性值（Get）

除了可以設定樣式，你也可以透過 .style 物件來讀取目前元素設定的行內樣式值。這跟操作一般物件的屬性一樣直覺：

console.log(element.style.color);      // 例如: "red"
console.log(element.style.fontSize);   // 例如: "20px"

這裡的 element.style 會回傳一個 CSSStyleDeclaration 物件，裡面包含所有該元素的行內樣式。你可以像這樣讀取屬性名稱來取得值。

⚠️ 非常重要：.style 只會讀取「行內樣式」

所謂的「行內樣式」，指的是直接寫在 HTML 元素 style="" 屬性裡面的樣式，例如：

<div id="title" style="color: red; font-size: 20px;"></div>

這時你用 JavaScript：

const element = document.getElementById("title");
console.log(element.style.color); // ✅ 可以讀到 "red"

🚫 無法取得 class 或外部 CSS 的樣式

如果該元素的樣式是透過外部 CSS 檔案、<style> 區塊，或是透過 class 名稱套用的話，.style 是讀不到這些樣式的！

<style>
  .highlight {
    color: blue;
    font-size: 18px;
  }
</style>

<div id="title" class="highlight"></div>

const element = document.getElementById("title");
console.log(element.style.color); // ❌ undefined（因為不是行內樣式）

✅ 想要取得「實際呈現的樣式」怎麼辦？

如果你想知道一個元素實際上畫面上看起來的樣式（也就是包含 class、外部 CSS、繼承、自動計算等），可以使用瀏覽器提供的 API：

const computedStyle = window.getComputedStyle(element);
console.log(computedStyle.color);      // 取得實際呈現的顏色
console.log(computedStyle.fontSize);   // 取得最終字體大小

這個 computedStyle 也是一個 CSSStyleDeclaration 物件，但它是由瀏覽器計算後產生的「最終樣式結果」，不管樣式是怎麼來的（行內、class、CSS 檔案、繼承等），都可以查到。

移除樣式屬性（Remove）

有時候你可能會希望「取消」某個樣式設定，讓該屬性不再生效，例如：重設顏色、還原成預設樣式或 class 樣式。

這時可以使用 .style.removeProperty() 方法來移除某個行內樣式屬性。

✅ 語法：

element.style.removeProperty("屬性名稱");

⚠️ 注意：這裡的屬性名稱要使用 原始 CSS 寫法（短橫線），不能是駝峰式。

範例：

element.style.removeProperty("color");          // ✅ 正確
element.style.removeProperty("font-size");      // ✅ 正確
element.style.removeProperty("backgroundColor"); // ❌ 錯誤！要寫成 "background-color"

🧪 移除樣式後的行為是什麼？

當你成功移除某個行內樣式時，該屬性就不會再從 element.style 裡面取得值，元素將會：

• 套用其他來源的樣式（如外部 CSS、class）
• 或回到瀏覽器的預設樣式（例如沒有特別設定時的黑色文字）

這讓你可以更精準地控制樣式的來源與優先順序，特別適合動態樣式切換的場景。

✅ 小提醒：移除樣式 ≠ 把值設成空字串

初學者常常會寫這樣的程式碼：

element.style.color = "";

這雖然也可以讓樣式失效，但它其實是把 color 設定為空字串，並不等於「移除」這個屬性。

比較推薦的做法還是使用 removeProperty()，這樣 .style 物件內也會乾乾淨淨，不會殘留空白屬性。

小結

應用範例

了解 CSSStyleDeclaration 的基本用法後，我們來看看實際的應用情境。

這些範例都是前端互動常見的需求，可以幫助你將靜態網頁變得更有動態效果與使用者互動性。

範例 1：點擊按鈕改變文字顏色

這是一個最經典的互動案例，當使用者點擊按鈕時，JavaScript 會透過 .style 屬性，修改段落文字的顏色。

✅ HTML + JavaScript 範例：

<button id="changeColorBtn">改變顏色</button>
<p id="text">這是一段文字</p>

<script>
  const btn = document.getElementById("changeColorBtn");
  const text = document.getElementById("text");

  btn.addEventListener("click", () => {
    text.style.color = "blue"; // 使用 CSSStyleDeclaration 設定樣式
  });
</script>

🧠 這裡學到了什麼？

• text.style.color = "blue" 會直接改變 <p> 元素的行內樣式。
• 實際上 text.style 是一個 CSSStyleDeclaration 物件。
• 修改 style.color 會立即反映在畫面上，無須重新渲染 DOM。
• 點語法這裡使用的是「駝峰式命名」（camelCase）→ color。

🟡 應用情境：

• 點擊按鈕切換主題顏色
• 滑鼠經過某元素時變色
• 選擇項目時高亮顯示

範例 2：動態設定樣式屬性名稱（使用中括號語法）

當你在開發過程中需要根據「變數」動態決定要改變的樣式屬性時，就會用到中括號語法。這是一種比點語法更有彈性的寫法。

✅ JavaScript 範例：

const styleProp = "backgroundColor";
element.style[styleProp] = "lightgreen";

你也可以把這段應用在前面的按鈕範例中：

<button id="applyStyle">套用樣式</button>
<div id="box" style="width: 100px; height: 100px;"></div>

<script>
  const btn = document.getElementById("applyStyle");
  const box = document.getElementById("box");

  const styleProp = "backgroundColor";
  const colorValue = "lightgreen";

  btn.addEventListener("click", () => {
    box.style[styleProp] = colorValue;
  });
</script>

🧠 這裡學到了什麼？

• 中括號語法可以使用變數指定屬性名稱。
• 適合用在「樣式名稱不固定」的情境，例如：
  • 從表單中取得樣式屬性
  • 使用者點選某個選單決定要改變的樣式
  • 撰寫通用的樣式函式

✅ 駝峰式命名還是必要！

雖然這裡用了中括號語法，但注意：屬性名稱依然必須是 駝峰式（camelCase），否則 .style 無法正確對應：

element.style["background-color"] = "red"; // ❌ 錯誤！無效
element.style["backgroundColor"] = "red";   // ✅ 正確

若你真的想使用 "background-color" 這種原生 CSS 屬性名稱，就應該改用：

element.style.setProperty("background-color", "red");

延伸應用：撰寫通用樣式設定函式

以下是一個通用的樣式設定函式，可以根據參數動態設定樣式屬性與數值：

function applyStyle(el, prop, value) {
  el.style[prop] = value;
}

const box = document.getElementById("box");
applyStyle(box, "borderRadius", "10px");
applyStyle(box, "backgroundColor", "orange");

這讓你的程式碼更具可讀性與可重複使用性，是寫大型應用時的重要技巧。

結語：CSSStyleDeclaration 是打造互動網頁的起點

對於初學者來說，掌握 CSSStyleDeclaration 是邁向前端互動設計的重要一步。

它讓你能夠透過 JavaScript 操作 CSS，讓靜態網頁擁有更多動態效果。

下次當你需要根據使用者操作動態改變畫面樣式時，就可以派上用場了。

建議大家多練習幾個實例，加深印象，寫出更靈活有趣的前端互動網頁！