HTML | DOM Style display Property

05 Jun, 2022
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
kumargaurav97520
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.