HTML DOM Style display properties
Style Objects Definition and Usage
display property sets or returns the element display type.
HTML elements in mostly "inline" or "block" elements: an inline element, in which the left and right are floating content. A block element fill the entire line, and nothing can be displayed at the left or right.
display attribute also allows authors to show or hide an element. Similar to the visibility property. However, if you set display: none, will hide the entire element, if you set visibility: hidden, content elements will not be visible, but the elements remain the original position and size.
grammar
Setting display properties:
Returns the display properties:
| 值 | 描述 |
|---|---|
| block | 元素呈现为块级元素。 |
| compact | 元素呈现为块级元素或内联元素，取决于上下文。 |
| inherit | display 属性的值从父元素继承。 |
| inline | 默认。元素呈现为内联元素。 |
| inline-block | 元素呈现为内联盒子内的块盒子。 |
| inline-table | 元素呈现为内联表格（类似 <table>），表格前后没有换行符。 |
| list-item | 元素呈现为列表。 |
| marker | 该值在盒子前后设置内容作为标记（与 :before 和 :after 伪元素一起使用，否则该值与 "inline" 是相同的）。 |
| none | 元素不会被显示。 |
| run-in | 元素呈现为块级或内联元素，取决于上下文。 |
| table | 元素呈现为块级表格（类似 <table>），表格前后带有换行符。 |
| table-caption | 元素呈现为表格标题（类似 <caption>）。 |
| table-cell | 元素呈现为表格单元格（类似 <td> 和 <th>）。 |
| table-column | 元素呈现为单元格的列（类似 <col>）。 |
| table-column-group | 元素呈现为一个或多个列的分组（类似 <colgroup>）。 |
| table-footer-group | 元素呈现为表格页脚行（类似 <tfoot>）。 |
| table-header-group | 元素呈现为表格页眉行（类似 <thead>）。 |
| table-row | 元素呈现为表格行（类似 <tr>）。 |
| table-row-group | 元素呈现为一个或多个行的分组（类似 <tbody>）。 |
Browser Support
All major browsers support display attributes.
Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".
Tips and Notes
Tip: If the element block element, its display type can be changed by the float property.
Examples
Examples
When you click the button when the element is not visible:
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.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">这是一些文本。</p>
<p id="p2">这是一些文本。</p>
<input type="button" onclick="demoDisplay()" value="隐藏显示属性的文本">
<input type="button" onclick="demoVisibility()" value="具有可见性属性的隐藏文本">
</body>
</html>
try it"
Style Objects