Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML DOM Style backgroundColor Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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()">Submit</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 and above
  • Edge 12 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Safari 1.0 and above
  • Opera 3.5 and above

My Personal Notes arrow_drop_up
Last Updated : 15 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials