HTML Style backgroundColor用法及代碼示例

HTML DOM中的backgroundColor屬性用於設置或返回元素的背景色。

用法:

```
object.style.backgroundColor
```
它返回元素的背景色。

object.style.backgroundColor = "color|transparent|initial|
inherit"

用於設置元素的背景色。

參數：backgroundColot屬性接受四個參數

color:該繩索保留背景色。
transparent:默認情況下，背景色是透明的。
initial:將此屬性設置為默認值
inherit:從其父元素繼承屬性

範例1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      Style backgroundColor Property 
    </title> 
    <script> 
        /* script to set background color */ 
        function geeks() { 
            document.body.style.backgroundColor =  
                                "lightgreen"; 
        } 
    </script> 
</head> 
  
<body style="text-align:center"> 
  
    <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1> 
  
    <h2> 
            Style backgroundColor Property 
        </h2> 
  
    <button type="button" onclick="geeks()"> 
      Submit 
    </button> 
</body> 
</html

輸出：

之前：
後：

範例2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Style backgroundColor Property 
    </title> 
    <style> 
        #geeks { 
            width:250px; 
            height:100px; 
            background-color:coral; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1> 
  
        <h2> 
            DOM Style backgroundColor Property 
        </h2> 
  
        <button onclick="geeks()">Submitt</button> 
  
        <div id="geeks"> 
            <h1>GeeksForGeeks</h1> 
        </div> 
  
        <script> 
            function geeks() { 
                document.getElementById("geeks").style.backgroundColor = 
                                                          "lightgreen"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

之前：
後：

支持的瀏覽器：下麵列出了DOM樣式backgroundColor屬性支持的瀏覽器：

Chrome 1.0
Internet Explorer4.0
Firefox 1.0
Safari 1.0
Opera 3.5

相關用法

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