如何通过js修改css样式

百变鹏仔 3天前 #JavaScript

文章标签样式

通过 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) =&gt; {  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) =&gt; {  element.style.border = "1px solid black";});

文章推荐

如何通过js修改css样式

如何通过 JavaScript 修改 CSS 样式

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？