在 JavaScript 中更改背景颜色
Ammar Ali
2021年10月2日
本教程将讨论如何使用 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>
在此代码中，你将看到一个按钮和一个文本。当你按下按钮时，文本的背景颜色将根据给定的颜色发生变化。
作者： Ammar Ali
