Style display 属性
描述
display 属性设置或返回元素的显示类型。
HTML 中的元素大多是“inline”或“block”元素：内联元素在其左右两侧具有浮动内容。块级元素填充整行，在其左右两侧无法显示任何内容。
display 属性还允许作者显示或隐藏元素。它类似于 visibility 属性。但是，如果您设置 display:none，它会隐藏整个元素，而 visibility:hidden 表示元素的内容将不可见，但元素保留在原始位置和大小。
提示：如果元素是块级元素，它的显示类型也可以使用 float 属性更改。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| display | 是 | 是 | 是 | 是 | 是 |
语法
返回 display 属性
object.style.display
设置 display 属性
object.style.display = value
属性值
| 值 | 描述 |
|---|---|
| block | 元素将作为块级元素呈现 |
| compact | 元素将作为块级元素或内联元素呈现。取决于上下文 |
| flex | 元素将作为块级 flex 盒呈现。CSS3 中的新属性 |
| grid | 元素将作为块级网格呈现。CSS3 中的新属性 |
| inherit | 从其父元素继承此属性。 阅读关于 inherit |
| initial | 将此属性设置为其默认值。 阅读关于 initial |
| inline | 元素将作为内联元素呈现。这是默认值 |
| inline-block | 元素将作为内联框内的块框呈现 |
| inline-flex | 元素将作为内联级 flex 盒呈现。CSS3 中的新属性 |
| inline-grid | 元素将作为内联级网格呈现。CSS3 中的新属性 |
| 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>） |
技术细节
| 默认值 | inline |
|---|---|
| 返回值 | 一个字符串，表示元素的显示类型 |
| CSS 版本 | CSS1 |
更多示例
示例
display 属性与 visibility 属性之间的区别
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
亲自尝试 »
示例
在隐藏和显示元素之间切换
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
亲自尝试 »
示例
"inline"、"block" 和 "none" 之间的区别
function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}
亲自尝试 »
相关页面
CSS 教程： CSS 显示和可见性
CSS 参考： display 属性
