HTML | DOM Style display Property

The Style display property in HTML DOM is used to set or return the display type of an element. It is similar to the visibility property, which display or hide the element. With a slight difference of display: none, hiding the entire element, while visibility: hidden meaning only the contents of the element will be invisible, but the element will remain in its original position and size.

Syntax:

  • It returns the display property.
    object.style.display
  • It sets the display property.
    object.style.display = value;

Property Values:

  • inline: It is the default value. It renders the element as an inline element.
  • block: It renders the element as a block-level element.
  • compact: It renders the element as a block-level or inline, depending on the context.
  • flex: It renders the element as a block-level flex box.
  • inline-block: It renders the element as a block box inside an inline box.
  • inline-flex: It renders the element as an inline-level flex box.
  • inline-table: It renders the element as an inline table.
  • list-item: It renders the element as a list.
  • marker: It sets content before or after the box as a marker.
  • none: It will not display any element.
  • run-in: It renders the element as block-level or inline, depending on the context.
  • table: It renders the element as a block table, with a line break before and after the table.
  • table-caption: It renders the element as a table caption.
  • table-cell: It renders the element as a table cell.
  • table-column: It renders the element as a column of cells.
  • table-column-group: It renders the element as a group of one or more columns.
  • table-footer-group: It renders the element as a table footer row.
  • table-header-group: It renders the element as a table header row.
  • table-row: It renders the element as a table row.
  • table-row-group: Element is rendered as a group of one or more rows.
  • initial: It sets the display property to its default value.
  • inherit: It inherits the display property values from its parent element.

Return Value: It returns a string, representing the display type of the element.

Example 1: This example describes the inline property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Style display Property
    </title>
</head>
  
<body>
    <h2>
        HTML DOM Display Property
    </h2>
      
    <p>
        Click on the button to set
        display property
    </p>
      
    <div id = "GFG">
        Geeks for Geeks
    </div>
      
    <button onclick="myGeeks()">
        Press
    </button>
      
    <!-- script to set display property -->
    <script>
        function myGeeks() {
            document.getElementById("GFG").style.display
                    = "inline";
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before click on the button:

After click on the button:

Example 2: This example describes the none property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Style display Property
    </title>
</head>
  
<body>
    <h2>
        HTML DOM Display Property
    </h2>
      
    <p>
        Click on the button to set
        display property
    </p>
      
    <div id = "GFG">
        Geeks for Geeks
    </div>
      
    <button onclick="myGeeks()">
        Press
    </button>
      
    <!-- script to set display property -->
    <script>
        function myGeeks() {
            document.getElementById("GFG").style.display
                    = "none";
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before click on the button:

After click on the button:

Example 3: This example describes the table-caption property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Style display Property
    </title>
</head>
  
<body>
    <h2>
        HTML DOM Display Property
    </h2>
      
    <p>
        Click on the button to set
        display property
    </p>
      
    <div id = "GFG">
        Geeks for Geeks
    </div>
      
    <button onclick="myGeeks()">
        Press
    </button>
      
    <!-- script to set display property -->
    <script>
        function myGeeks() {
            document.getElementById("GFG").style.display
                    = "table-caption";
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before click on the button:

After click on the button:

Example 4: This example describes the block property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Style display Property
    </title>
</head>
  
<body>
    <h2>
        HTML DOM Display Property
    </h2>
      
    <p>
        Click on the button to set
        display property
    </p>
      
    <div id = "GFG">
        Geeks for Geeks
    </div>
      
    <button onclick="myGeeks()">
        Press
    </button>
      
    <!-- script to set display property -->
    <script>
        function myGeeks() {
            document.getElementById("GFG").style.display
                    = "block";
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before click on the button:

After click on the button:

Supported Browsers: The browser supported by DOM style display property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.