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 backgroundColor property
- color: This property holds the background color.
- transparent: By default the background color is transparent.
- initial: Set this property to it’s default
- inherit: Inherits the property from it’s parent element
Return Values: It returns a string value, which representing the background color.
Example 1:
html
<!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:
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()">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
.png)
