如何通过js修改css样式

2024-06-22 12:24:38 前端笔记 35

如何通过 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) =&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";
});