Open In App

HTML | DOM Style opacity Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads