Open In App

HTML DOM Style backgroundColor Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 parameters accepted by backgroundColor property  

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

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

Example 1: In this example, we will use the backgroundColor property in HTML DOM.

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>
        Style backgroundColor Property
    </title>
</head>
   
<body style="text-align:center">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>
        Style backgroundColor Property
    </h2>
    <button type="button" onclick="geeks()">
        Submit
    </button>
       
      <script>
        /* script to set background color */
        function geeks() {
            document.body.style.backgroundColor =
                "lightgreen";
        }
    </script>
</body>
   
</html>


Output: 

Example 2: In this example, we will use the backgroundColor property in HTML DOM.

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: 

Supported Browsers: The browser supported by DOM style backgroundColor Properties 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


Last Updated : 30 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads