如何使用 javascript 修改樣式
JavaScript 是一種編程語言，允許您動態地修改網頁的樣式。可以使用以下方法之一：
1. 直接操作元素樣式
使用 style 屬性，可以直接訪問和修改元素的樣式。例如：
const element = document.getElementById("my-element");
element.style.color = "red";
登錄后復制
2. 使用 CSSOM (CSS 對象模型)
CSSOM 是一組 JavaScript 接口，它允許您以編程方式與 CSS 規則進行交互。可以使用 getComputedStyle() 方法檢索元素的計算樣式，并使用 setProperty() 方法修改樣式。
const element = document.getElementById("my-element");
const computedStyle = getComputedStyle(element);
computedStyle.setProperty("color", "red");
登錄后復制
3. 使用類列表
類列表是元素上 CSS 類名的集合。可以通過 classList 屬性訪問和修改類列表。例如：
const element = document.getElementById("my-element");
element.classList.add("red");
element.classList.remove("blue");
登錄后復制
4. 使用 CSS Variables
CSS 變量允許您存儲和重用樣式值。可以通過 — 語法檢索和修改 CSS 變量。例如：
document.documentElement.style.setProperty("--my-color", "red");
document.getElementById("my-element").style.color = "var(--my-color)";
登錄后復制
提示：
使用 !important 聲明可以覆蓋現有樣式規則。
對于大量樣式修改，建議使用 CSSOM 或 CSS 變量。
始終使用適當的單位（例如像素、百分比）來設置樣式值。
對樣式進行修改時要小心，因為它可能會影響頁面的布局和外觀。
