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 parameter accepted by backgroundColot property
- color: This roperty holds the background color.
- transparent: Bydefault the background color is transparent.
- initial: Set this property to it’s default
- inherit: Inherits the property from it’s parent element
Example 1:
<!DOCTYPE html> < html > < head > < title > Style backgroundColor Property </ title > < script > /* script to set background color */ function geeks() { document.body.style.backgroundColor = "lightgreen"; } </ script > </ head > < body style = "text-align:center" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < h2 > Style backgroundColor Property </ h2 > < button type = "button" onclick = "geeks()" > Submit </ button > </ body > </html |
Output:
- Before:
- After:
Example 2:
<!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()" >Submitt</ button > < div id = "geeks" > < h1 >GeeksForGeeks</ h1 > </ div > < script > function geeks() { document.getElementById("geeks").style.backgroundColor = "lightgreen"; } </ script > </ center > </ body > </ html > |
Output:
- Before:
- After:
Supported Browsers: The browser supported by DOM style backgroundColor Property are listed below:
- Chrome 1.0
- Internet Explorer4.0
- Firefox 1.0
- Safari 1.0
- Opera 3.5