Open In App

HTML | DOM Style display Property

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

html




<!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>                   


Output: Before click on the button:

  

After click on the button:

  

Example 2: This example describes the none property value. 

html




<!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>                   


Output: Before click on the button:

  

After click on the button:

  

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

html




<!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>                   


Output: Before click on the button:

  

After click on the button:

  

Example 4: This example describes the block property value. 

html




<!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>                   


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 1 and above
  • Edge 12 and above
  • Internet Explorer 4 and above
  • Firefox 1 and above
  • Opera 7 and above
  • Safari 1 and above


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