Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Style backgroundColor Property

  • Last Updated : 15 May, 2022

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 backgroundColor property  

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

Return Values: It returns a string value, which representing the background color.

Example 1:  

html




<!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:  

html




<!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 :

Start Your Coding Journey Now!