在 JavaScript 中更改背景颜色

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中更改背景颜色

作者：迹忆客最近更新：2024/03/19 浏览次数：

本教程将讨论如何使用 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>