HTML DOM display Property
 Complete Style Object Reference
Definition and Usage
The display property sets how an element will be displayed.
Syntax
Object.style.display=value
|
Possible Values
| Value |
Description |
| none |
The element will not be displayed |
| block |
The element will be displayed as a block-level element,
with a line break before and after the element |
| inline |
The element will be displayed as an inline element,
with no line break before or after the element |
| list-item |
The element will be displayed as a list |
| run-in |
The element will be displayed as block-level or inline
element depending on context |
| compact |
The element will be displayed as block-level or inline
element depending on context |
| marker |
This value sets content before or after a box to be a
marker. Note: This value should only be used with :before and
:after pseudo-elements. Otherwise this value is identical to "inline" |
| table |
The element will be displayed as a block table (like
<table>), with a line break before and after the table |
| inline-table |
The element will be displayed as an inline table (like
<table>), with no line break before or after the table |
| table-row-group |
The element will be displayed as a group of one or more
rows (like <tbody>) |
| table-header-group |
The element will be displayed as a table header row (like <thead>) |
| table-footer-group |
The element will be displayed as a table footer
row (like <tfoot>) |
| table-row |
The element will be displayed as a table row (like
<tr>) |
| table-column-group |
The element will be displayed as a group of one or more
columns (like <colgroup>) |
| table-column |
The element will be displayed as a column of cells
(like <col>) |
| table-cell |
The element will be displayed as a table cell (like
<td> and <th>) |
| table-caption |
The element will be displayed as a table caption (like
<caption>) |
Example
The following example sets an element to not be displayed:
<html>
<head>
<script type="text/javascript">
function removeElement()
{
document.getElementById("p1").style.display="none";
}
</script>
</head>
<body>
<h1>Hello</h1>
<p id="p1">This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
<input type="button" onclick="removeElement()"
value="Do not display paragraph" />
</body>
</html>
|
Try-It-Yourself Demos
display - Set an element to not be displayed
Complete Style Object Reference
|
