HTML | DOM Style visibility Property

Last Updated : 14 Jul, 2022

The Style visibility property in HTML DOM used to set the visibility for an element. It is used to hide or show the element. It returns the visibility property that is given to an element.

Syntax:

It returns the visibility property.

object.style.visibility

It is used to set the visibility property.

object.style.visibility = "visible | hidden | collapse | initial | inherit"

Property Values:

visible: It is used to specify the element to be visible. It is a default value.
hidden: Element is not visible, but it affects layout.
collapse: It hides the element when it is used on a table row or a cell.
initial: It sets the visibility property to its default value.
inherit: This property is inherited from its parent element.

Return Value: It returns a string representing the content to be displayed or not for an element.
Example-1:

html

<!DOCTYPE html>
<html>
<body>

    <center>
        <h1 style="color:green;"> 
                GeeksForGeeks 
            </h1>
        <h2>DOM Style visibility Property </h2>
        <p id="gfg"> A Computer science portal for geeks</p>



        <button type="button" onclick="geeks()">
            Change visibility
        </button>

        <script>
            function geeks() {
                document.getElementById(
                  "gfg").style.visibility = "hidden";
            }
        </script>
    </center>
</body>

</html>

Output:

Before clicking on the button:

After clicking on the button:

Example-2:

html

<!DOCTYPE html>
<html>
<body>

    <center>
        <h1 style="color:green;;"> 
                GeeksForGeeks 
            </h1>
        <h2>DOM Style visibility Property </h2>
        <p id="gfg" style="visibility:hidden;"> 
          A Computer science portal for geeks</p>



        <button type="button" onclick="geeks()">
            Change visibility
        </button>
        <p id="y"></p>



        <script>
            function geeks() {
                var x = document.getElementById(
                  "gfg").style.visibility;
              
                document.getElementById('y').innerHTML = x;
            }
        </script>
    </center>
</body>

</html>