通过 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";// 设置元素的字体大小为 20pxelement.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";});
登录后复制
以上就是如何通过js修改css样式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2674081.html
