在 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
