HTML | DOM Style backgroundColor Property
source link: https://www.geeksforgeeks.org/html-dom-style-backgroundcolor-property/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
- Last Updated : 04 Nov, 2019
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:
filter_none
edit
close
play_arrow
link
brightness_4
code
<!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:
filter_none
edit
close
play_arrow
link
brightness_4
code
<!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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK