HTML - DOM Style Object backgroundColor Property

Quiz

HTML DOM Style Object backgroundColor property sets or return the background color of an element.

Syntax

Given below are the syntax to get or set the backgroundColor property.

Set the backgroundColor property:

object.style.backgroundColor= "color | transparent | initial | inherit";

Get the backgroundColor property:

object.style.backgroundColor;

Property Values

Value	Description
color	It sets the background color.
transparent	This is the default value which sets the background color to transparent.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents background color property.

Examples of HTML DOM Style Object 'backgroundColor' Property

The following example illustrates implementation of backgroundColor property.

Change Background Color of body

The following example changes the background color of the whole document to green.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundColor Property
    </title>
</head>
<body>
    <p>This is just a random text.</p>
    <button onclick="fun()">Change</button>
    <script>
        function fun(){
            document.body.style.backgroundColor="#04af2f";
        }
    </script>
</body>
</html>

Change Background Color of div Element

The following example changes the background color of div element to green.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundColor Property
    </title>
    <style>
        div {
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>This is just a random text.</p>
    <button onclick="fun()">Change</button>
    <div id="color">
        <p>This is color changing div</p>
    </div>
    <script>
        function fun(){
            document.getElementById("color")
            .style.backgroundColor="#04af2f";
        }
    </script>
</body>
</html>

Get Background Color of div Element

The following example gets the background color of div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundColor Property
    </title>
    <style>
        div {
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>This is just a random text.</p>
    <button onclick="fun()">Change</button>
    <button onclick="get()">Get</button>
    <div id="color">
        <p>This is color changing div</p>
    </div>
    <p id="get"></p>
    <script>
        function fun(){
            document.getElementById("color")
            .style.backgroundColor="#04af2f";
        }
        function get(){
            let x= document.getElementById("color")
            .style.backgroundColor;
            document.getElementById("get").innerHTML=x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
backgroundColor	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page