HTML | DOM Style backgroundColor Property

The backgroundColor property in HTML DOM is used to set or return the background-color of an element.

Syntax:

```
object.style.backgroundColor
```
It returns the background color of an element.

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

It is used to set the background color of an element.

Parameter: There are four parameter accepted by backgroundColot property

color: This roperty holds the background color.
transparent: Bydefault the background color is transparent.
initial: Set this property to it’s default
inherit: Inherits the property from it’s parent element

Example 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       

Output:

Before:
After:

Example 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>      

Output:

Before:
After:

Supported Browsers: The browser supported by DOM style backgroundColor Property are listed below:

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

My Personal Notes

Recommended Posts: