使用 JavaScript 修改 CSS 的三種方法

更新日期： 2024 年 11 月 14 日

在網頁開發中，我們經常需要透過 JavaScript 來修改 DOM 元素的 CSS 樣式。

一般來說，最基礎的方式是直接使用 domElement.style.屬性名稱 = 屬性值，例如：

document.getElementById("myElement").style.color = "blue";
document.getElementById("myElement").style.fontSize = "16px";

然而，這種寫法與我們在 CSS 中的書寫方式不同，當需要修改的樣式變多時，會顯得冗長並且降低可讀性。

因此，JavaScript 提供了其他更靈活的方式，來批量修改樣式，使程式碼更加清晰。

本文將介紹三種更優化的寫法。

方法一：使用 Object.assign 批量修改樣式

介紹 Object.assign 方法

Object.assign() 是一個用來複製物件屬性的 JavaScript 方法，可以將一個或多個物件的屬性複製到目標物件中。

其語法如下：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); 
// 輸出: { a: 1, b: 4, c: 5 }
console.log(returnedTarget === target); 
// 輸出: true

在這裡，我們可以使用 Object.assign 將樣式物件的屬性，批量地賦值給目標元素的 style 屬性，以達到修改樣式的目的。

使用範例

我們可以先建立一個包含 CSS 樣式的物件，然後使用 Object.assign() 將該樣式物件中的屬性批量複製到元素的 style 屬性中。

範例如下：

const styles = {
  display: "block",
  position: "absolute",
  color: "red",
  fontSize: "20px"
};

const element = document.getElementById("myElement");
Object.assign(element.style, styles);

這樣就可以一次性地為 myElement 元素添加多個 CSS 樣式，簡化了逐一指定樣式的步驟。

方法二：使用 .style.cssText 直接寫入 CSS 樣式

cssText 的優點

.style.cssText 是另一種方便的方式，它允許直接為一個元素的 style 屬性設置多行的 CSS 樣式文字。

這種方法可以一次性地定義多個樣式，語法結構更接近我們在 CSS 文件中寫樣式的方式。

使用反引號提升可讀性

在設定 .style.cssText 的值時，建議使用反引號（`）包裹樣式文字，而不是單引號或雙引號。

反引號允許在字符串中使用空行，使樣式結構更符合 CSS 的撰寫格式，增加可讀性。

例如：

document.getElementById("myElement").style.cssText = `
  display: block; 
  position: absolute;
  color: blue;
  font-size: 18px;
`;

這種方式更接近純 CSS 語法，閱讀起來直觀且易於維護。

方法三：動態添加與切換 CSS 類別

在某些情況下，使用 JavaScript 動態添加或切換 CSS 類別是一個更靈活且強大的方法。

這種方法非常適合，當我們需要在不同情境中切換多組樣式時，避免直接操作 style 屬性，保持樣式與程式碼的分離。

使用 classList 管理類別

JavaScript 中提供的 classList API 可以輕鬆地新增、移除或切換元素的類別。

以下是一些常用方法：

• element.classList.add("className")：添加一個類別。
• element.classList.remove("className")：移除一個類別。
• element.classList.toggle("className")：如果類別存在則移除，否則添加該類別。

使用範例

首先，假設我們在 CSS 中已經定義了一個類別 .activeStyle，包含了我們想要的樣式：

.activeStyle {
  display: block;
  position: absolute;
  color: green;
  font-size: 22px;
}

然後，我們可以通過 JavaScript 來動態地切換該類別：

const element = document.getElementById("myElement");
element.classList.add("activeStyle");  // 添加樣式

// 或使用 toggle 來切換樣式
element.classList.toggle("activeStyle"); // 若類別存在則移除，不存在則添加

這種方法可以有效管理樣式，當需要切換或移除多個樣式時顯得更簡便。

結論

1. Object.assign() 批量添加樣式：適合一次性設定多個樣式屬性，讓程式碼簡潔。
2. .style.cssText 直接定義樣式：用反引號寫樣式讓程式碼結構接近 CSS，適合快速定義多行樣式。
3. 動態添加與切換 CSS 類別：在多樣式場景下最佳選擇，使 JavaScript 和 CSS 更易於維護和分離。

根據具體需求選擇合適的方法，可以提高程式碼的可讀性和維護性，使 JavaScript 與 CSS 的結合更有效率。