使用 JavaScript 更改 CSS 屬性

若要用 JavaScript 更改 CSS 屬性，請先選取目標元素，再設定其 style 物件中的屬性。若要套用一組相關樣式，則可改用 CSS 類別。只需更新單一元素時，可使用 ID 或 CSS 選取器；若要更新所有符合條件的元素，則可使用類別集合。瀏覽器會提供 document 物件；jQuery 並非必要。

使用 element.style 更改單一 CSS 屬性

若只需設定一個行內樣式，請使用 element.style。CSS 屬性名稱含有連字號時，在 JavaScript 中要改用駝峰式命名：border-color 會寫成 borderColor。這個小型測試範例可在 JavaScript 環境中執行，示範如何選取元素並設定屬性；在網頁中，document 則是瀏覽器提供的實際文件物件。

請執行此範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const input = { style: {} };
const document = {
  getElementById(id) {
    return id === "email" ? input : null;
  }
};

const element = document.getElementById("email");
if (element) {
  element.style.borderColor = "red";
}

設定樣式會更改元素的行內樣式，但不會修改樣式表中的規則，也不會移除其他樣式。若在瀏覽器中操作，對應的選取方式是 document.getElementById("email")；讀取或修改元素屬性前，請先檢查回傳值。範例中的程式碼與可見標籤或輸出維持英文。

使用 CSS 類別套用多個樣式

當某個狀態需要搭配多項宣告時，使用類別會比較容易維護。先在樣式表中定義類別，再用 classList.add() 套用，並用 classList.remove() 移除。例如，輸入錯誤類別可以同時設定紅色邊框和紅色文字。classList 會保留元素上的其他類別。

設定 element.className = "input-error" 也會變更元素的類別屬性，但會取代整個類別字串。除非把既有類別（例如版面或驗證類別）也加入新字串，否則它們都會消失。若要個別新增或移除類別，請使用 classList；若確實要取代所有類別，才使用 className。

使用 getElementsByClassName 依類別選取元素

document.getElementsByClassName("input-blue-border") 會回傳符合條件元素的即時 HTMLCollection，而不是陣列。當符合條件的元素加入或離開文件時，這個集合也會更新。若要更改目前所有符合條件的元素，可使用 for...of 迴圈逐一處理集合，並更新每個元素的樣式或類別清單。若需要使用陣列方法，請先用 Array.from(...) 將集合轉成陣列。

也可以在某個元素上呼叫此方法，以尋找該元素內符合條件的後代元素。引數只需提供類別名稱，不要加上開頭的句點；只有使用 querySelector() 等 CSS 選取器 API 時，才要寫成 .input-blue-border。

使用 getElementById 或 querySelector 選取單一元素

document.getElementById("email") 會依 ID 尋找元素，並回傳符合條件的元素；若找不到則回傳 null。文件中的 ID 應保持唯一；重複 ID 屬於無效標記，因此不要依賴瀏覽器會回傳哪一個重複項目。

document.querySelector(".input-blue-border") 接受 CSS 選取器，並回傳第一個符合條件的元素；若沒有符合項目則回傳 null。它可依 ID（#email）、類別（.input-blue-border）或標籤（input）選取。即使選取器可能符合多個元素，querySelector() 也只會回傳第一個。修改元素的樣式或類別前，請先檢查結果是否為 null。

選擇選取器並處理找不到或符合多個元素的情況

請依目標及要更新的元素數量選擇方法：若要選取具有唯一 ID 的單一元素，使用 getElementById；若使用 CSS 選取器較方便，且只需要第一個符合項目，則使用 querySelector()。若要更改所有具有某個類別的元素，使用 getElementsByClassName。只需設定一項樣式時，使用 element.style；若某個具名狀態需要多項宣告，則切換類別。

如果元素尚未出現在文件中、ID 或類別拼錯，或標記尚未載入，選取器可能找不到元素。請等相關標記存在後再執行選取，或在存取 style 或 classList 前先檢查回傳值。例如，瀏覽器中的寫法是 const element = document.querySelector(".notice"); if (element) element.classList.add("is-visible");。若只要更新類別集合中的一個項目，請明確選定該項目；若要更新全部項目，則逐一走訪集合。

摘要

先選取預定操作的元素。若要設定單一行內宣告，使用 element.style；若要套用一組樣式並保留既有類別，使用 classList。getElementById 依 ID 選取元素，querySelector() 回傳第一個符合 CSS 選取器的元素，而 getElementsByClassName 則提供即時集合，方便更新所有符合類別的元素。使用單一元素的結果前先確認它存在；若要處理多個元素，請逐一走訪集合。