通過 javascript 修改 css 樣式有 4 種方法：使用 getelementbyid() 獲取特定 id 的元素，修改其 style 屬性。使用 getelementsbyclassname() 獲取指定類名的所有元素，使用 foreach() 迭代修改樣式。使用 queryselector() 選擇符合特定 css 選擇器的第一個元素，修改其樣式。使用 queryselectorall() 選擇所有符合特定 css 選擇器的元素，使用 foreach() 迭代修改樣式。
如何通過 JavaScript 修改 CSS 樣式
通過 getElementById() 方法
通過此方法可以獲取具有特定 ID 的元素，然后使用其 style 屬性來修改 CSS 樣式。例如：
// 獲取具有 id="myElement" 的元素
const element = document.getElementById("myElement");
// 設(shè)置元素的背景色為紅色
element.style.backgroundColor = "red";
// 設(shè)置元素的字體大小為 20px
element.style.fontSize = "20px";
登錄后復(fù)制
通過 getElementsByClassName() 方法
此方法獲取具有指定類名的所有元素，然后使用 forEach() 方法對其迭代并修改其樣式。例如：
// 獲取具有類名為 "myClass" 的所有元素
const elements = document.getElementsByClassName("myClass");
// 對每個元素設(shè)置背景色為藍色
elements.forEach((element) => {
element.style.backgroundColor = "blue";
});
登錄后復(fù)制
通過 querySelector() 方法
此方法可用于選擇符合特定 CSS 選擇器的第一個元素，然后修改其樣式。例如：
// 獲取具有類名為 "myClass" 的第一個元素
const element = document.querySelector(".myClass");
// 設(shè)置元素的文本顏色為白色
element.style.color = "white";
登錄后復(fù)制
通過 querySelectorAll() 方法
此方法可用于選擇所有符合特定 CSS 選擇器的元素，然后使用 forEach() 方法對其迭代并修改其樣式。例如：
// 獲取所有具有類名為 "myClass" 的元素
const elements = document.querySelectorAll(".myClass");
// 對每個元素設(shè)置邊框為 1px 實線黑色
elements.forEach((element) => {
element.style.border = "1px solid black";
});
登錄后復(fù)制
