HTML DOM Style backgroundColor Property

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;">
        w3wiki
    </h1>
    <h2>
        Style backgroundColor Property
    </h2>
    <button type="button" onclick="Beginner()">
        Submit
    </button>
       
      <script>
        /* script to set background color */
        function Beginner() {
            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>
        #Beginner {
            width: 250px;
            height: 100px;
            background-color: coral;
        }
    </style>
</head>
   
<body>
    <center>
        <h1 style="color:green;">
            w3wiki
        </h1>
        <h2>
            DOM Style backgroundColor Property
        </h2>
        <button onclick="Beginner()">Submit</button>
        <div id="Beginner">
            <h1>w3wiki</h1>
        </div>
       
        <script>
            function Beginner() {
                document.getElementById("Beginner").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

HTML

HTML

Contact Us