在 JavaScript 中更改背景颜色

2024-07-06 20:45| 来源: 网络整理| 查看: 265

本教程将讨论如何使用 JavaScript 中的 backgroundColor 属性更改背景颜色。

使用 JavaScript 中的 backgroundColor 属性更改背景颜色

我们可以使用 JavaScript 中的 backgroundColor 属性更改背景颜色。要使用此属性，你需要获取要更改其背景颜色的元素，然后你可以使用 backgroundColor 属性来设置背景颜色。

例如，让我们使用 HTML 创建一个页面，并使用 backgroundColor 属性将正文的背景颜色更改为绿色。请参考下面的代码。

document.body.style.backgroundColor = 'green';

你还可以使用类的 id 或名称获取元素。要使用其 id 获取元素，你可以使用 getElementById() 函数。要使用其类获取元素，你可以使用 getElementsByClassName() 函数。

例如，让我们通过 id 获取元素并使用 backgroundColor 属性更改其背景颜色。请参考下面的代码。

Hello Wold document.getElementById('myID').style.backgroundColor = 'green';

上面的代码只会更改 id 为 myID 的元素的背景颜色，而不是整个 body 部分。你还可以使用不同颜色的颜色代码来更改元素的背景颜色，而不是使用颜色名称来更改它。

让我们编写一个代码来使用按钮更改文本的背景颜色。请参考下面的代码。

Change Color Hello World function Mycolor() { var element = document.getElementById("myID"); element.style.backgroundColor='#900'; }

在此代码中，你将看到一个按钮和一个文本。当你按下按钮时，文本的背景颜色将根据给定的颜色发生变化。

【本文地址】

今日新闻