Skip to content
Related Articles

Related Articles

HTML | DOM Style visibility Property
  • Last Updated : 12 May, 2021

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>

Output: 

  • Before clicking on the button: 
     

  • After clicking on the button: 
     

Supported Browsers: The browser supported by DOM Style visibility property are listed below: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :