通过 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");
// 设置元素的背景色为红色
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";
});
想要了解更多内容，请持续关注码农资源网，一起探索发现编程世界的无限可能!
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » 如何通过js修改css样式
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » 如何通过js修改css样式
