如何通过js修改css样式

通过 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";
});

登录后复制

以上就是如何通过js修改css样式的详细内容，更多请关注叮当号网其它相关文章！