通过 javascript 修改 css 样式有 4 种方法：使用 getelementbyid() 获取特定 id 的元素，修改其 style 属性。使用 getelementsbyclassname() 获取指定类名的所有元素，使用 foreach() 迭代修改样式。使用 queryselector() 选择符合特定 css 选择器的第一个元素，修改其样式。使用 queryselectorall() 选择所有符合特定 css 选择器的元素，使用 foreach() 迭代修改样式。
通过 getElementById() 方法
通过此方法可以获取具有特定 ID 的元素，然后使用其 style 属性来修改 CSS 样式。例如：
// 获取具有 id="myElement" 的元素
const element = document.getElementById("myElement");
// 设置元素的背景色为红色
element.style.backgroundColor = "red";
// 设置元素的字体大小为 20px
element.style.fontSize = "20px";
通过 getElementsByClassName() 方法
此方法获取具有指定类名的所有元素，然后使用 forEach() 方法对其迭代并修改其样式。例如：
立即学习“前端免费学习笔记（深入）”；
// 获取具有类名为 "myClass" 的所有元素
const elements = document.getElementsByClassName("myClass");
// 对每个元素设置背景色为蓝色
elements.forEach((element) => {
element.style.backgroundColor = "blue";
});
通过 querySelector() 方法
此方法可用于选择符合特定 CSS 选择器的第一个元素，然后修改其样式。例如：
// 获取具有类名为 "myClass" 的第一个元素
const element = document.querySelector(".myClass");
// 设置元素的文本颜色为白色
element.style.color = "white";
通过 querySelectorAll() 方法
此方法可用于选择所有符合特定 CSS 选择器的元素，然后使用 forEach() 方法对其迭代并修改其样式。例如：
// 获取所有具有类名为 "myClass" 的元素
const elements = document.querySelectorAll(".myClass");
// 对每个元素设置边框为 1px 实线黑色
elements.forEach((element) => {
element.style.border = "1px solid black";
});