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.
<!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.
<!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