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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。