In order to access this site you need to enable JavaScript!

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>

Copy Code

Preview

Syntax Highlighter

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>