JavaScript HTML DOM Style display 属性
-
display 属性
display属性设置或返回元素的显示类型。HTML中的元素主要是“内联”或“块”元素:内联元素的左侧和右侧都有浮动内容。块元素填充整行,左侧或右侧不显示任何内容。display属性还允许作者显示或隐藏元素。它类似于visibility属性。但是,如果设置display:none,它会隐藏整个元素,同时visibility:hidden意味着元素的内容将不可见,但元素保持其原始位置和大小。提示:如果元素是块元素,则还可以使用float属性更改其显示类型。设置div元素不显示:
尝试一下document.getElementById("myDIV").style.display = "none";
-
浏览器支持
项 IE/Edge Chrome FireFox Safari Opera 属性 display 支持支持支持支持支持 -
语法
返回display属性:object.style.display设置display属性:object.style.display = value -
属性值
值 描述 block 元素呈现为块级元素 compact 元素呈现为块级或内联元素。取决于背景 flex 元素呈现为块级弹性框。 CSS3中的新功能 inline 元素呈现为内联元素。这是默认值 inline-block 元素呈现为内联框内的块框 inline-flex 元素呈现为内联级弹性框。 CSS3中的新功能 inline-table 元素呈现为内联表(如<table>),在表之前或之后没有换行符 list-item 元素呈现为列表 marker 此值将框之前或之后的内容设置为标记(用于:brfore和:after伪元素。否则此值与“内联”相同) 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 -
更多例子
显示属性和可见性属性之间的差异:
尝试一下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; }
返回p元素的显示类型:
尝试一下alert(document.getElementById("myP").style.display);
-