You are here: Reference > JavaScript > client-side > style handling > properties > display

display style property

Browser support:
Specifies or returns the element's display type.
With this property, you can set how the element should be rendered. The elements in HTML are mostly 'inline' or 'block' elements.
  • An inline element should have floating content on its left and right side, too, but a block element fills the entire line, and nothing can be displayed at its left or right side.
  • If an element is a block element, its display type can be changed with the float property, too.
For a complete list of available display values, see the table below.
The display property is also very useful in dynamic pages, because it allows the author to show or hide an element. It is similar to the visibility property, but if you set the display property to 'none', it hides the entire element. The 'hidden' value for the visibility property means that the contents of the element will be invisible, but the element stays in its original position and size.

Syntax:

object.display;
You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: display

Possible values:

The type of this property is string.
 One of the following values: 
-moz-box
Object is rendered as a box.
-moz-bulletinboard
Same rendering rules for the child elements as the XUL bulletinboard element.
-moz-compact
Creates either block or inline boxes, depending on context.
-moz-deck
Object is rendered as a deck.
-moz-grid
Object is rendered as a grid.
-moz-grid-group
Object is rendered as a grid group.
-moz-grid-line
Object is rendered as a grid line.
-moz-groupbox
Object is rendered as a groupbox.
-moz-inline-block
Deprecated. Use inline-block value instead. Object is rendered as a block box inside an inline box.
-moz-inline-box
Object is rendered as a box inside an inline box.
-moz-inline-grid
Object is rendered as a grid inside an inline box.
-moz-inline-stack
Object is rendered as a stack inside an inline box.
-moz-inline-table
Deprecated. Use inline-table value instead. Object is rendered as a table inside an inline box.
-moz-marker
Declares content generated before or after a box to be a marker.
-moz-popup
Object is rendered as a popup.
-moz-run-in
Creates either block or inline boxes, depending on context.
-moz-stack
Object is rendered as a stack.
-webkit-box
Object is rendered as a box.
-webkit-inline-box
Object is rendered as a box inside an inline box.
block
Element is rendered as a block. You are able to change a block element's floating rules with the styleFloat property.
compact
Creates either block or inline boxes, depending on context.
inherit
Takes the value of this property from the computed style of the parent element.
inline
Default. Element is rendered as an inline box.
inline-block
Object is rendered as a block box inside an inline box.
inline-table
Object is rendered as a table inside an inline box. Supported in Internet Explorer from version 8.
list-item
Equivalent of the default styling of the li element.
marker
Declares content generated before or after a box to be a marker.
none
Object is not rendered.
ruby
Equivalent of the default styling of the ruby element. Supported in Internet Explorer from version 8.
ruby-base
Equivalent of the default styling of the ruby base text element. Supported in Internet Explorer from version 8.
ruby-base-container
Equivalent of the default styling of the ruby base container element. Supported in Internet Explorer from version 8.
ruby-text
Equivalent of the default styling of the ruby text element. Supported in Internet Explorer from version 8.
ruby-text-container
Equivalent of the default styling of the ruby text container element. Supported in Internet Explorer from version 8.
run-in
Creates either block or inline boxes, depending on context. Supported in Internet Explorer from version 8.
table
Specifies a block-level table. Supported in Internet Explorer from version 8.
table-caption
Equivalent of the default styling of the caption element. Supported in Internet Explorer from version 8.
table-cell
Equivalent of the default styling of the td or th element. Supported in Internet Explorer from version 8.
table-column
Equivalent of the default styling of the col element. Supported in Internet Explorer from version 8.
table-column-group
Equivalent of the default styling of the colgroup element. Supported in Internet Explorer from version 8.
table-footer-group
Equivalent of the default styling of the tfoot element.
table-header-group
Equivalent of the default styling of the thead element.
table-row
Equivalent of the default styling of the tr element. Supported in Internet Explorer from version 8.
table-row-group
Equivalent of the default styling of the tbody element. Supported in Internet Explorer from version 8.
Default: inline.

Example HTML code 1:

This example illustrates the use of the display property:
<head>
    <style>
        .block {
            display: block;
            background-color: #CFCFCF;
        }
    </style>
</head>
<body>
    <p>This is a <b id="aTag" class="block">block</b> 
        and this is an <b>inline</b> element.
    </p>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the display property in JavaScript:
<head>
    <script type="text/javascript">
        function ChangeDisplay (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var anchor = document.getElementById ("aTag");
            anchor.style.display = selectState;
        }
    </script>
</head>
<body>
    <p>Change the display type<a id="aTag" style="background-color: #CFCFCF;">of this element</a> with the list box!</p>

    <select onchange="ChangeDisplay (this);" size="7">
        <option />block
        <option />none
        <option selected="selected" />inline
        <option />inline-block
        <option />list-item
        <option />table-header-group
        <option />table-footer-group
    </select>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content