Skip to content
Related Articles

Related Articles

Improve Article
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>     

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 arrow_drop_up
Recommended Articles
Page :