Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style display Property

  • Last Updated : 31 Jul, 2019

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.






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




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




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




<!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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :