JavaScript修改CSS樣式詳解

一、動態修改CSS

使用JS動態修改CSS樣式，可以實現實時更新樣式，提供更好的用戶體驗。一般來說，我們通過JavaScript的style對象，可以設置元素的CSS樣式屬性。例如下面這段代碼，會將id為”box”的div元素的顏色設置為紅色：

document.getElementById("box").style.color = "red";

你也可以通過style對象來設置多個CSS屬性。例如，下面這段代碼將id為”box”的元素的背景顏色設置為灰色，字體大小設置為20像素，字體顏色設置為白色：

var box = document.getElementById("box");
box.style.backgroundColor = "gray";
box.style.fontSize = "20px";
box.style.color = "white";

二、使用classList

雖然通過style對象可以直接修改CSS樣式，但是如果需要改變多個屬性時，就會顯得很繁瑣。因此可以使用classList屬性來實現更便捷的修改CSS樣式。classList由DOM元素的屬性className衍生而來，它是一個DOMTokenList對象，提供了添加、刪除、切換和檢查元素類的方法。

下面是使用classList屬性實現修改CSS樣式的代碼示例：

var box = document.getElementById("box");
box.classList.add("my-class"); // 添加類名為「my-class」的類
box.classList.remove("my-class"); // 移除類名為「my-class」的類
box.classList.toggle("my-class"); // 切換類名為「my-class」的類
box.classList.contains("my-class"); // 檢查類名為「my-class」的類是否存在

三、querySelecotor和querySelectorAll

使用querySelector和querySelectorAll可以通過CSS選擇器選擇元素，從而修改它們的CSS樣式。querySelector方法返回匹配指定CSS選擇器的第一個元素，而querySelectorAll方法返回匹配指定CSS選擇器的所有元素。

下面是使用querySelector和querySelectorAll實現修改CSS樣式的代碼示例：

// 選擇匹配id為"box"的第一個元素，並將背景顏色設為紅色
document.querySelector("#box").style.backgroundColor = "red";

// 選擇匹配類名為"btn"的所有元素，並將字體顏色設為藍色
var buttons = document.querySelectorAll(".btn");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].style.color = "blue";
}

四、使用setAttribute

使用setAttribute方法可以動態地設置HTML標籤的屬性，包括CSS屬性。該方法接收兩個參數：要設置的屬性名和屬性值。如果該屬性不存在，則該方法會添加該屬性。如果該屬性已經存在，則會覆蓋該屬性原來的值。

下面是使用setAttribute實現修改CSS樣式的代碼示例：

var box = document.getElementById("box");
box.setAttribute("style", "background-color: gray; font-size: 20px; color: white");

五、總結

通過以上幾種方法，我們可以靈活地動態修改CSS樣式，提升用戶體驗和交互性。不同的方法適用於不同的場景，可以根據具體需求靈活選擇。