在 JavaScript 中更改背景颜色

Ammar Ali 2021年10月2日
在 JavaScript 中更改背景颜色

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        document.body.style.backgroundColor = 'green';
    </script>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p id='myID'>
        Hello Wold
    </p>
    <script type="text/javascript">
        document.getElementById('myID').style.backgroundColor = 'green';
    </script>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<button onClick="Mycolor()">Change Color</button>
<div id="myID">Hello World</div>
<script type='text/javascript'>
function Mycolor() {
var element = document.getElementById("myID");
element.style.backgroundColor='#900';
}
</script>
</body>
</html>

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

Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相关文章 - JavaScript Color