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