Example
Set a background color for a document:
document.body.style.backgroundColor = "red";
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The backgroundColor property sets or returns the background color of an element.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| backgroundColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Syntax
Return the backgroundColor property:
object.style.backgroundColor
Set the backgroundColor property:
object.style.backgroundColor = "color|transparent|initial|inherit"
Property Values
| color | Specifies the background color. Look at CSS Color Values for a complete list of possible color values |
| transparent | Default. The background color is transparent [underlying content will shine through] |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| transparent |
| A String, representing the background color |
| CSS1 |
More Examples
Example
Set a background color of a specific
document.getElementById["myDiv"].style.backgroundColor = "lightblue";
Try it Yourself »
Example
Return the background color of a specific
alert[document.getElementById["myDiv"].style.backgroundColor];
Try it Yourself »
Example
Return the background color of a document:
alert[document.body.style.backgroundColor];
Try it Yourself »
Related Pages
CSS tutorial: CSS Background
CSS reference: background-color property
HTML DOM reference: background property
Created: July-24, 2021
This tutorial will discuss how to change the background color using the backgroundColor property in JavaScript.
Change the Background Color Using the backgroundColor Property in JavaScript
We can change the background color using the backgroundColor property in JavaScript. To use this property, you need to get the element whose background color
you want to change, and then you can use the backgroundColor property to set the background color.
For example, let’s create a page using HTML and change the background color of the body to green using the backgroundColor property. See the code below.
document.body.style.backgroundColor = 'green';
You can also get the element with the id or name of the class. To get an element using its id, you can use the getElementById[] function. To get an element using its class, you can use the getElementsByClassName[]
function.
For example, let’s get an element by its id and change its background color using the backgroundColor property. See the code below.
Hello Wold
document.getElementById['myID'].style.backgroundColor = 'green';
The code above will only change the background color of the element with id myID and not the whole body section. You also change the background color of an element using the color code of different colors instead of changing it using the color name.
Let’s write a code to change the background color of a text using a button. See the code below.
Change Color
Hello World
function Mycolor[] {
var element = document.getElementById["myID"];
element.style.backgroundColor='#900';
}
In this code, you will see a button and a text. When you press the button, the background color of the text will change according to the given color.