display property

Gets or sets a value that indicates whether and how the object is rendered.

Syntax

Integer value = object.put_display( v);Integer value = object.get_display(* sDisplay);

Property values

Type: BSTR

block (block)

Object is rendered as a block element.

inline (inline)

Default. Object is rendered as an inline element sized by the dimensions of the content.

list-item (list-item)

Starting in Internet Explorer 6. Object is rendered as a block element, and a list-item marker is added.

list-item (list-item)

Object is rendered as a block element, and a list-item marker is added.

none (none)

Object is not rendered.

table-header-group (table-header-group)

Object is rendered as thead. Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each document spanned by a table.

table-footer-group (table-footer-group)

Object is rendered as tfoot. Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each document spanned by a table.

inline-block (inline-block)

Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.

table (table)

Internet Explorer 8. Object is rendered as table.

inline-table (inline-table)

Internet Explorer 8. Object is rendered as table within an inline-block.

table-row (table-row)

Internet Explorer 8. Object is rendered as tr.

table-row-group (table-row-group)

Internet Explorer 8. Object is rendered as tBody. Table body is always displayed after table-header-group objects and before table-footer-group objects.

table-column (table-column)

Internet Explorer 8. Object is rendered as col.

table-column-group (table-column-group)

Internet Explorer 8. Object is rendered as colGroup.

table-cell (table-cell)

Internet Explorer 8. Object is rendered as cell (td) or header cell (th), depending on location within the table.

table-caption (table-caption)

Internet Explorer 8. Object is rendered as caption.

run-in (run-in)

Internet Explorer 8. If the run-in box contains a block element, object is rendered as a block. If not, and the following sibling is a block (which is neither floating nor absolutely positioned), object is rendered as the first inline-block of the sibling. Otherwise, same as block.

ruby (ruby)

Internet Explorer 8. Specifies that an element defines a ruby structure. This and the following values are from the CSS3 Ruby Module. This value only applies to the supported ruby elements, rt and ruby.

ruby-base (ruby-base)

Internet Explorer 8. Specifies that an element defines a ruby base. This value only applies to the supported ruby elements, rt and ruby.

ruby-text (ruby-text)

Internet Explorer 8. Specifies that an element defines a ruby text. This value only applies to the supported ruby elements, rt and ruby.

ruby-base-container (ruby-base-container)

Internet Explorer 8. Specifies a container for one or more ruby base elements. This value only applies to the supported ruby elements, rt and ruby.

ruby-text-container (ruby-text-container)

Internet Explorer 8. Specifies a container for one or more ruby text elements. This value only applies to the supported ruby elements, rt and ruby.

flex (-ms-flexbox)

Internet Explorer 10. Specifies a block-level flexible box ("flexbox") container. For more information on flexbox containers, see Flexible Box ("Flexbox") Layout.

inline-flex (-ms-inline-flexbox)

Internet Explorer 10. Specifies an inline-level flexible box ("flexbox") container. For more information on flexbox containers, see Flexible Box ("Flexbox") Layout.

-ms-grid (-ms-grid)

Internet Explorer 10. Specifies a Grid element. For more information on grid alignment, see Grid Alignment.

String format

inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | flex | inline-flex | -ms-grid | -ms-inline-grid | none

CSS information

Applies To All elements
Media visual
Inherited no
Initial Value inline

Remarks

All visible HTML objects are block or inline. For example, a div object is a block element, and a span object is an inline element. Block elements typically start a new line and can contain other block elements and inline elements. Inline elements do not typically start a new line and can contain other inline elements or data. Changing the values for the IHTMLRuleStyle::display property affects the layout of the surrounding content by:

  • Adding a new line after the element with the value block.
  • Removing a line from the element with the value inline.
  • Hiding the data for the element with the value none.

In contrast to the IHTMLRuleStyle::visibility property, IHTMLRuleStyle::display:none reserves no space for the object on the screen.

The table-header-group and table-footer-group values can be used to specify that the contents of the tHead and tFoot objects are displayed on every page for a table that spans multiple pages.

In Microsoft Internet Explorer 4.0, the block, inline, and list-item values are not supported explicitly, but do render the element.

The block and inline values are supported explicitly as of Microsoft Internet Explorer 5.

In Microsoft Internet Explorer 5.5 and earlier, the default value of this property for li elements is block.

The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object's height or width.

Starting with Internet Explorer 8, the table display styles allow elements to closely parallel the visual layout of a table. The Cascading Style Sheets (CSS) table display model does not require explicit elements to correspond with the HTML tags. For example, an element styled as IHTMLRuleStyle::display does not need to be contained within a block that is styled IHTMLRuleStyle::display to be styled correctly. Implicit table elements are created as necessary in an attempt to make the document valid. Contrast this behavior to the traditional HTML table model, where table elements are implicitly closed early to avoid unexpected nesting.

In Windows Internet Explorer 7 and earlier, the default value of this property for table, tr, td, col, and colGroup elements is block.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports IHTMLRuleStyle::display:"-webkit-box" as an alias for IHTMLRuleStyle::display:flex and IHTMLRuleStyle::display:"-webkit-inline-box" as an alias for IHTMLRuleStyle::display:inline-flex.

When using IHTMLRuleStyle::display:flex or IHTMLRuleStyle::display:"-webkit-box", the IHTMLStyle5::maxWidth of flex items is clamped to the available space inside the flex container.

Examples

This example shows the effect of changing the values for the IHTMLRuleStyle::display property between inline, block, and none.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/display.htm

<span id=oSpan>
This is a span 
</span>
in a sentence.
<p>
<input type="button" value="Block" 
    onclick="oSpan.style.display='block'">
:

This example uses function calls to hide and show table rows and cells.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/tables.htm

<script type="text/javascript">
function getPets()
{
    oRow1Cell2.style.display="none";
    oRow2Cell2.style.display="block";
    oRow3Cell2.style.display="none";
}
</script>
:
<table>
<tr id="oRow1"><td>Horses</td>
<td id="oRow1Cell2">Thoroughbreds</td>
<td>Fast</td></tr>
<tr id="oRow2"><td>Dogs</td>
<td id="oRow2Cell2">Greyhounds</td>
<td>Fast</td></tr>
<tr id="oRow3"><td>Marsupials</td>
<td id="oRow3Cell2">Opossums</td>
<td>Slow</td></tr>
</table>
:
<input type="button" onclick="getPets()" 
    value="Show household pets">

Requirements

Minimum supported client

Windows XP

Minimum supported server

Windows Server 2003

Header

Mshtml.h

IDL

Mshtml.idl

DLL

Mshtml.dll

See also

CSS Enhancements in Internet Explorer 6