Style display Property
Style display Property
The display property is used to either set or return element display type. Mostly used property values are inline and block. A block element fills the entire line while an inline element has floating content on its left and right side. If set the display to none, it will hide the entire element.
Syntax:-
Its syntax is:- object.style.display OR object.style.display = value
Return:-
Its return is:- string having display type of an element
Further Explanation:-
Value | Description |
---|---|
inline | Displays an element as an inline element. |
block | Displays an element as a block element. |
contents | Makes the child elements children next level up in the DOM |
flex | Displays an element as a block-level flex container |
grid | Displays an element as a block-level grid container |
inline-block | Displays an element as an inline-level block container. |
inline-flex | Displays an element as an inline-level flex container |
inline-grid | Displays an element as an inline-level grid container |
inline-table | The element is displayed as an inline-level table |
list-item | Let the element behave like a li element |
run-in | Displays an element as either block or inline, depending on context |
table | Let the element behave like a table element |
table-caption | Let the element behave like a caption element |
table-column-group | Let the element behave like a colgroup element |
table-header-group | Let the element behave like a thead element |
table-footer-group | Let the element behave like a tfoot element |
table-row-group | Let the element behave like a tbody element |
table-cell | Let the element behave like a td element |
table-column | Let the element behave like a col element |
table-row | Let the element behave like a tr element |
none | The element is completely removed |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |