Style display 属性
定义和用法
display 属性设置或返回元素的显示类型。
HTML 中的元素大多是"内联"或"块"元素：一个内联元素，在其左侧和右侧都是浮动内容。一个块元素填满整个行，并没有什么可显示在其左侧或右侧。
display 属性还允许作者显示或隐藏一个元素。与 visibility 属性类似。
然而，如果您设置 display:none，将隐藏整个元素，如果您设置 visibility:hidden，
元素的内容将不可见，但元素保持原来的位置和大小。
提示: 如果是块元素，也可以使用 float 属性更改其显示类型。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| display | Yes | Yes | Yes | Yes | Yes |
语法
返回 display 属性:
object.style.display
设置 display 属性:
object.style.display = value
属性值
| 值 | 描述 | 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>）。 |
| initial | 设置该属性为它的默认值。请参阅 initial |
| inherit | 从父元素继承该属性。请参阅 inherit |
技术细节
| 默认值: | inline |
|---|---|
| 返回值: | 一个字符串，表示元素的显示类型 |
| CSS 版本 | CSS1 |
更多实例
实例
对比 display 属性和 visibility 属性之间的区别:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
亲自试一试 »
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';
}
}
亲自试一试 »
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;
}
亲自试一试 »
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}
相关页面
CSS 教程: CSS Display and visibility
CSS 参考手册: display 属性
❮ Style 对象
