HTML | DOM Style opacity Property
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;" > w3wiki </ h1 > < h2 >DOM Style opacity Property </ h2 > < div id = "gfg" > A Computer science portal for Beginner</ div > < button type = "button" onclick = "Beginner()" > set Decoration </ button > < script > function Beginner() { 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;" > w3wiki </ h1 > < h2 >DOM Style opacity Property </ h2 > < div id = "gfg" style = "color:white" > A Computer science portal for Beginner</ div > < button type = "button" onclick = "Beginner()" > change opacity </ button > < script > function Beginner() { 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
Contact Us