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
元素呈现为内联表格(类似
list-item
元素呈现为列表。
marker
该值在盒子前后设置内容作为标记(与 :before 和 :after 伪元素一起使用,否则该值与 “inline” 是相同的)。
none
元素不会被显示。
run-in
元素呈现为块级或内联元素,取决于上下文。
table
元素呈现为块级表格(类似
table-caption
元素呈现为表格标题(类似
)。table-cell
元素呈现为表格单元格(类似
和 )。table-column
元素呈现为单元格的列(类似
)。table-column-group
元素呈现为一个或多个列的分组(类似
)。table-footer-group
元素呈现为表格页脚行(类似
)。table-header-group
元素呈现为表格页眉行(类似 )。
table-row
元素呈现为表格行(类似
)。table-row-group
元素呈现为一个或多个行的分组(类似
)。浏览器支持
所有主要浏览器都支持 display 属性。
注意:IE7 及更早的版本不支持 “inherit” 值。IE8 只有规定了 !DOCTYPE 才支持 “inherit”。IE9 支持 “inherit”。
提示和注释
提示:如果元素时块元素,它的显示类型可通过 float 属性改变。
实例
实例
当点击按钮时设置元素不可见:
有码中国(codes365.cn)function demoDisplay(){
document.getElementById(“p1″).style.display=”none”;
}
function demoVisibility(){
document.getElementById(“p2″).style.visibility=”hidden”;
}
这是一些文本。
这是一些文本。
Style 对象