HTML DOM Style display Property

HTMLWeb DevelopmentFront End Technology

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

 Live Demo

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

On clicking the “Change Display” −

raja
Published on 23-Oct-2019 12:22:46
Advertisements