Style display 属性
Style 对象的 display 属性设置或返回元素的显示类型
HTML 中的元素大多是"内联"或"块"元素：一个内联元素，在其左侧和右侧都是浮动内容
一个块元素填满整个行，并没有什么可显示在其左侧或右侧
display 属性还允许作者显示或隐藏一个元素
与 visibility 属性类似，不同的是，如果设置 display:none，将隐藏整个元素，如果设置 visibility:hidden，元素的内容将不可见，但元素保持原来的位置和大小
如果元素时块元素，它的显示类型可通过 float 属性改变
语法
设置 display 属性
object.style.display=" value "
返回 display 属性
object.style.display
值说明
| 值 | 描述 |
|---|---|
| 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> |
浏览器支持
所有主要浏览器都支持 display 属性
IE7 及更早的版本不支持 "inherit" 值
IE8 只有添加了 <!DOCTYPE html> 才支持 "inherit"
IE9 支持 "inherit"
范例
当点击按钮时设置元素不可见
<script> function demoDisplay(){ document.getElementById("p1").style.display="none"; } function demoVisibility(){ document.getElementById("p2").style.visibility="hidden"; } </script> <p id="p1">这是一些文本</p> <p id="p2">这是一些文本</p> <input type="button" onclick="demoDisplay()" value="隐藏显示属性的文本"> <input type="button" onclick="demoVisibility()" value="具有可见性属性的隐藏文本">