Style display property

Definition and usage

display Sets or returns the display type of an element.

Most elements in HTML are either 'inline' or 'block' elements: inline elements have floating content on both sides. Block elements fill the entire line and cannot display any content on either side.

display property also allows the author to display or hide elements. It is similar to the visibility property. However, if set display:none, it will hide the entire element, while visibility:hidden means that the content of the element will be invisible, but the element will maintain its original position and size.

Tip:If the element is a block element, the display type can also be changed through the float property.

See also:

CSS Tutorial:CSS Display and visibility

CSS Reference Manual:display property

Instance

Example 1

Set the <div> element to not be displayed:

document.getElementById("myDIV").style.display = "none";

Try It Yourself

Example 2

The difference between the display and visibility properties:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

Try It Yourself

Example 3

Toggle between hiding and displaying elements:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

Try It Yourself

Example 4

The difference between "inline", "block", and "none":
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

Try It Yourself

Example 5

Returns the display type of the <p> element:

alert(document.getElementById("myP").style.display);

Try It Yourself

Syntax

Return the display property:

object.style.display

Set the display property:

object.style.display = value

Attribute Value

Value Description
block The element is rendered as a block-level element.
compact The element is presented as a block-level or inline element. It depends on the context.
flex The element is presented as a block-level flexible box. A new feature in CSS3.
inline The element is presented as an inline element. Default.
inline-block The element is presented as a block box within an inline box.
inline-flex The element is presented as an inline-level flexible box. A new feature in CSS3.
inline-table The element is presented as an inline table (such as <table>), without line breaks before and after the table.
list-item The element is presented as a list.
marker

This value sets the content before or after the box to be a marker.

Used with :before and :after pseudo-elements. Otherwise, this value is the same as "inline".
none The element is not displayed.
run-in The element is presented as a block-level or inline element. It depends on the context.
table The element is presented as a block table (block table) (such as <table>), with line breaks before and after the table.
table-caption The element is presented as a table caption (such as <caption>).
table-cell The element is presented as a table cell (such as <td> and <th>).
table-column The element is presented as a cell column (such as <col>).
table-column-group The element is presented as a group of one or more columns (such as <colgroup>).
table-footer-group The element is presented as a table footer row (such as <tfoot>).
table-header-group The element is presented as a table header row (such as <thead>).
table-row The element is presented as a table row (such as <tr>).
table-row-group The element is presented as a group of one or more lines (such as <tbody>).
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default value: inline
Return value: A string indicating the display type of the element.
CSS Version: CSS1

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support