HTML DOM教程

HTML DOM 简介 HTML DOM 节点 HTML DOM 方法 HTML DOM 属性 HTML DOM 访问 HTML DOM 修改 HTML DOM 修改 HTML 内容 HTML DOM 元素 HTML DOM 事件 HTML DOM 导航 HTML DOM 总结 HTML DOM 对象

display

Style display 属性

定义和用法

display 属性设置或返回元素的显示类型。

HTML 中的元素大多是"内联"或"块"元素：一个内联元素，在其左侧和右侧都是浮动内容。一个块元素填满整个行，并没有什么可显示在其左侧或右侧。

display 属性还允许作者显示或隐藏一个元素。与 visibility 属性类似。然而，如果您设置 display:none，将隐藏整个元素，如果您设置 visibility:hidden，元素的内容将不可见，但元素保持原来的位置和大小。

语法

设置 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 才支持 "inherit"。IE9 支持 "inherit"。

提示和注释

提示：如果元素时块元素，它的显示类型可通过 float 属性改变。

实例

当点击按钮时设置元素不可见：

<html>
<head>
<script>
function displayResult()
{
document.getElementById("p1").style.display="none";
}
</script>
</head>
<body>

<p id="p1">This is some text.</p>
<input type="button" onclick="displayResult()" value="Do not display paragraph">

</body>
</html>