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;" >
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
Share your thoughts in the comments
Please Login to comment...