Style display Property

Style display Property


Style display Property
It sets whether an element is treated as a block or inline element and the layout used for its children such as flow layout, grid or flex. It is used to set or return the display type of an element.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
 
property
 
chrome
 
firefox
 
microsoft edge
 
Opera
 
display
 
yes
 
yes
 
yes
 
Yes
 
Syntax
Return the display property:
object.style.display
Set the display property:
object.style.display=value
Example
Output
 
Click the "click it" button to set the display property of the DIV element to "none":
 
Property Values
 
Value
 
Description
 
block
 
Element is rendered as a block level element.
 
compact
 
Element is rendered as a block level element. Depends on context.
 
flex
 
Element is rendered as a block level 
flex box.
 
inline
 
Element is rendered as an inline element.This is default.
 
inline-block
 
Element is rendered as a block box inside an inline box.
 
inline-flex
 
Element is rendered as an inline level flex box.
 
inline-table
 
Element is rendered as an inline table with no line break before or after the table.
 
list-item
 
Element is rendered as a list
none
 
Elements will not be displayed.
 
run-in
 
Element is rendered as a block level or inline element. Depends on context.
 
table
 
Element is rendered as a block table with a line break before and after the table.
 
table-caption
 
Element is rendered as a table-caption.
 
table-cell
 
Element is rendered as a table-cell.
 
table-column
 
Element is rendered as a column of cells.
 
table-column-group
 
Element is rendered as a group of one or more columns.
 
table-footer-group
 
Element is rendered as a table- footer row.
 
table-header-group
 
Element is rendered as a table header row.
 
table-row
 
Element is rendered as a table-row.
 
table-row-group
 
Element is rendered as a group of one or more rows.
 
initial
 
Sets this property to its default value.
 
inherit
 
Inherits this property from its parent element.
 
Technical Details
 
Default value:
 
Inline
 
Version:
 
CSS1
 
Return value:
 
A string, representing the display type of an element.