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