HTML | DOM Style opacity Property
Last Updated :
08 Aug, 2022
The Style opacity property in HTML DOM used to set opacity level for an element. Opacity level defines the transparency level where value 1 represents not transparent, 0.5 represents 50% transparency and 0 represents completely transparent.It also returns opacity level of an element.
Syntax:
- It returns the opacity property.
object.style.opacity
- It is used to set the opacity property.
object.style.opacity = "number|initial|inherit"
Property Values:
- number: It specifies the opacity value and it ranges from 0.0 to 1.0.
- initial: It sets the opacity property to its default value.
- inherit: This property is inherited from its parent element.
Return Value: It returns a string representing the opacity level of an element.
Example 1:
HTML
<!DOCTYPE html>
< html >
< head >
< title >DOM Style opacity Property </ title >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h2 >DOM Style opacity Property </ h2 >
< div id = "gfg" > A Computer science portal for geeks</ div >
< button type = "button" onclick = "geeks()" >
set Decoration
</ button >
< script >
function geeks() {
document.getElementById("gfg").style.opacity
= "0.3";
}
</ script >
</ center >
</ body >
</ html >
|
Output:
- Before clicking on the button:
- After clicking on the button:
Example 2:
HTML
<!DOCTYPE html>
< html >
< head >
< title >DOM Style opacity Property </ title >
< style >
#gfg {
width: 150px;
height: 40px;
background-color: green;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h2 >DOM Style opacity Property </ h2 >
< div id = "gfg" style = "color:white" >
A Computer science portal for geeks</ div >
< button type = "button" onclick = "geeks()" >
change opacity
</ button >
< script >
function geeks() {
document.getElementById("gfg").style.opacity
= "0";
}
</ script >
</ center >
</ body >
</ html >
|
Output:
- Before clicking on the button:
- After clicking on the button:
Supported Browsers: The browser supported by DOM Style opacity property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 9
- Firefox 1
- Opera 9
- Apple Safari 2
Share your thoughts in the comments
Please Login to comment...