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;" > w3wiki </ h1 > < h2 > Style backgroundColor Property </ h2 > < button type = "button" onclick = "Beginner()" > Submit </ button > < script > /* script to set background color */ function Beginner() { 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 > #Beginner { width: 250px; height: 100px; background-color: coral; } </ style > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > DOM Style backgroundColor Property </ h2 > < button onclick = "Beginner()" >Submit</ button > < div id = "Beginner" > < h1 >w3wiki</ h1 > </ div > < script > function Beginner() { document.getElementById("Beginner").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