HTML DOM Style backgroundColor屬性用法及代碼示例

backgroundColor 屬性用於設置或返回元素的背景顏色。我們可以通過標準名稱指定值，rgb()、rgba()、hsl() 或 hsla()。

用法

以下是語法 -

設置 backgroundColor 屬性 -

object.style.backgroundColor = "color|transparent

值

上述屬性值解釋如下 -

Sr.No	值和描述
1	Color 用於指定背景顏色。
2	Transparent 將背景顏色設置為透明，即可以看到底層內容。它是默認值。

示例

讓我們看一下 backgroundColor 屬性的示例 -

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      background-color:rgba(10,122,102,0.1);
   }
</style>
<script>
   function changeBackColor(){
      document.getElementById("DIV1").style.backgroundColor="rgba(1,200,55,0.5)";
      document.getElementById("Sample").innerHTML="The background color is now changed";
   }
</script>
</head>
<body>
<div id="DIV1">Duis tincidunt urna a interdum consectetur. Pellentesque nec pretium ante.
In nisl magna, vestibulum non vulputate vel, feugiat ac tellus. Sed tincidunt id leo at mollis.
Praesent pellentesque purus vitae scelerisque gravida. Pellentesque pulvinar scelerisque sem,
at euismod sapien tristique et.</div>
<p>Change the above div background color by clicking the below button</p>
<button onclick="changeBackColor()">CHANGE COLOR</button>
<p id="Sample"></p>
</body>
</html>

輸出

這將產生以下輸出 -

單擊“更改剪輯”按鈕 -

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Style backgroundColor Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。