JavaScript 更改颜色

JavaScript 是一种广泛使用的编程语言，可以通过它来动态地修改 HTML 元素的样式，包括颜色。在本篇文章中，我们将介绍 JavaScript 如何通过操作 DOM 元素来实现修改颜色的功能。

修改元素的背景颜色

要修改元素的背景颜色，我们需要先获取该元素的引用，然后设置其背景颜色属性。以下是一个示例代码片段，用于将页面中所有 class 为 "example" 的元素背景颜色设置为绿色：

let elements = document.getElementsByClassName("example");

for (let i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = "green";
}

代码解释：

• document.getElementsByClassName("example") 用于获取所有 class 名称为 "example" 的元素。
• for (let i = 0; i < elements.length; i++) 用于循环遍历所有获取到的元素。
• elements[i].style.backgroundColor = "green"; 用于设置当前循环到的元素的背景颜色为绿色。

修改元素的文本颜色

要修改元素的文本颜色，我们需要先获取该元素的引用，然后设置其文本颜色属性。以下是一个示例代码片段，用于将页面中所有 class 为 "example" 的元素文本颜色设置为红色：

let elements = document.getElementsByClassName("example");

for (let i = 0; i < elements.length; i++) {
  elements[i].style.color = "red";
}

代码解释：

• document.getElementsByClassName("example") 用于获取所有 class 名称为 "example" 的元素。
• for (let i = 0; i < elements.length; i++) 用于循环遍历所有获取到的元素。
• elements[i].style.color = "red"; 用于设置当前循环到的元素的文本颜色为红色。

总结

JavaScript 可以方便地修改 HTML 元素的样式，包括背景颜色和文本颜色等。我们只需要获取到目标元素的引用，然后设置其对应的样式属性即可。以上示例代码片段只是基础操作，开发者可以根据实际需求进行更多的样式操作。