HTML DOM Style display Property

The HTML DOM Style display property is used for setting or returning the display type of an element. Elements are mostly block or inline. You can also hide the element using display:none.

Following is the syntax for −

Setting the display property −

object.style.display = value

The above property value is explained as follows −

Value	Description
inline	Fordisplaying the element as inline element i.e. the width and heightproperties will have no effect.
block	Theblock element is displayed on new line and takes the whole width.
contents	Thisonly displays the child elements and make the parent elementdisappear making the child direct children of the DOM.
flex	Displaysan element as a block-level flex container
grid	Displaysan element as a block-level grid container
inline-block	Sameas inline but now you can apply width and height values.
inline-flex	Displaysan element as an inline-level flex container
inline-grid	Displaysan element as an inline-level grid container
inline-table	Theelement is displayed as an inline-level table
list-item	Letthe element behave like a <li> element
run-in	Displaysan element as either block or inline, depending on context
table	Letthe element behave like a <table> element
table-caption	Letthe element behave like a <caption> element
table-column-group	Letthe element behave like a <colgroup> element
table-header-group	Letthe element behave like a <thead> element
table-footer-group	Letthe element behave like a <tfoot> element
table-row-group	Letthe element behave like a <tbody> element
table-cell	Letthe element behave like a <td> element
table-column	Letthe element behave like a <col> element
table-row	Letthe element behave like a <tr> element
none	Theelement is completely removed
initial	Forsetting this property to initial value.
inherit	Toinherit the parent property value

Let us look at an example for the display property −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      padding:10px;
      background-color:lightblue;
      display:flex;
      flex-direction:right;
   }
   #flexSpan{
      width:70px;
      background-color:red;
      margin:20px;
      padding:10px;
   }
</style>
<script>
   function changeDisplay() {
      document.getElementById("DIV1").style.display = "block";
      document.getElementById("flexSpan").style.display = "block";
      document.getElementById("Sample").innerHTML="The display is now changed to block for both the    div and its inner Span elements";
   }
</script>
</head>
<body>
   <div id="DIV1">
      <span id="flexSpan">WORLD1</span>
      <span id="flexSpan">WORLD2</span>
   </div>
   <p>Change the display property of the above div and its inner elements by clicking the below    button</p>
   <button onclick="changeDisplay()">Change Display</button>
   <p id="Sample"></p>
</body>
</html>

Output

HTML DOM Style display Property

On clicking the “Change Display” −

HTML DOM Style display Property