在 JavaScript 中更改背景颜色
Ammar Ali
2021年10月2日
JavaScript
JavaScript Color
JavaScript Background
本教程将讨论如何使用 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>
在此代码中，你将看到一个按钮和一个文本。当你按下按钮时，文本的背景颜色将根据给定的颜色发生变化。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
作者： Ammar Ali
