Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style opacity Property

  • Last Updated : 19 May, 2021

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 form 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
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :