在 JavaScript 中更改背景顏色

Ammar Ali 2021年10月2日
在 JavaScript 中更改背景顏色

本教程將討論如何使用 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>

在此程式碼中,你將看到一個按鈕和一個文字。當你按下按鈕時,文字的背景顏色將根據給定的顏色發生變化。

Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相關文章 - JavaScript Color