Style displayProperty
Style Object
Definition and Usage
The display property sets or returns the element's display type.
Elements in HTML are mostly "inline" or "block" elements: An inline element has floating content on both its left and right sides. A block element fills the entire line, and nothing can be displayed on its left or right side.
The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none, the entire element is hidden, whereas if you set visibility:hidden, the element's content is invisible, but the element retains its original position and size.
Syntax
Set the display property:
Return the display property:
| Value | Description |
|---|---|
| block | The element is rendered as a block-level element. |
| compact | The element is rendered as a block-level or inline element, depending on the context. |
| inherit | The value of the display property is inherited from the parent element. |
| inline | Default. The element is rendered as an inline element. |
| inline-block | The element is rendered as a block box inside an inline box. |
| inline-table | The element is rendered as an inline table (like <table>), with no line breaks before or after the table. |
| list-item | The element is rendered as a list. |
| marker | This value sets content as a marker before and after the box (used with :before and :after pseudo-elements; otherwise, this value is the same as "inline"). |
| none | The element will not be displayed. |
| run-in | The element is rendered as a block-level or inline element, depending on the context. |
| table | The element is rendered as a block-level table (like <table>), with line breaks before and after the table. |
| table-caption | The element is rendered as a table caption (like <caption>). |
| table-cell | The element is rendered as a table cell (like <td> and <th>). |
| table-column | The element is rendered as a column of cells (like <col>). |
| table-column-group | The element is rendered as a group of one or more columns (like <colgroup>). |
| table-footer-group | The element is rendered as a table footer row (like <tfoot>). |
| table-header-group | The element is rendered as a table header row (like <thead>). |
| table-row | The element is rendered as a table row (like <tr>). |
| table-row-group | The element is rendered as a group of one or more rows (like <tbody>). |
Browser Support
All major browsers support the display property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Tips and Notes
Tip:If the element is a block element, its display type can be changed through the float property.
Example
Example
Set the element to be invisible when the button is clicked:
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<script>
function demoDisplay(){
document.getElementById("p1").style.display="none";
}
function demoVisibility(){
document.getElementById("p2").style.visibility="hidden";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<p id="p2">This is some text.</p>
<input type="button" onclick="demoDisplay()" value="Hide text with display property">
<input type="button" onclick="demoVisibility()" value="Hide text with visibility property">
</body>
</html>
Try it Yourself »
Style Object Other Extensions