HTML | DOM Style backgroundColor Property

Last Updated : 04 Nov, 2019

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>     