在 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
