The difference between visibility and display in JavaScript

Most people can easily confuse CSS property display with visibility, they seem to be no different, in fact, their differences are very large.

The visibility property is used to determine whether an element is displayed or hidden, which is represented by the visibility= "Visible|hidden" (visible indicates display, hidden indicates hidden).

When visibility is set to "hidden", the element is hidden, but it still occupies its original position.

CSS Display Properties

value	Description
None	This element is not displayed.
Block	This element is displayed as a block-level element with a newline character before and after this element.
Inline	Default. This element is displayed as an inline element with no line break before or after the element.
Inline-block	Inline block element. (CSS2.1 new value)
List-item	This element is displayed as a list.
Run-in	This element is displayed as a block-level element or inline element, depending on the context.
Compact	There is a value compact in CSS, but it has been removed from CSS2.1 due to a lack of broad support.
Marker	The CSS has a value of marker, but it has been removed from the CSS2.1 due to a lack of broad support.
Table	This element is displayed as a block-level table (similar to <table>) with a newline character before and after the table.
Inline-table	This element is displayed as an inline table (similar to <table>) and there are no line breaks before or after the table.
Table-row-group	This element is displayed as a grouping of one or more rows (similar to <tbody>).
Table-header-group	This element is displayed as a grouping of one or more rows (similar to <thead>).
Table-footer-group	This element is displayed as a grouping of one or more rows (similar to <tfoot>).
Table-row	This element is displayed as a table row (similar to <tr>).
Table-column-group	This element is displayed as a grouping of one or more columns (similar to <colgroup>).
Table-column	This element is displayed as a cell column (like <col>)
Table-cell	This element is displayed as a table cell (similar to <td> and <th>)
Table-caption	This element is displayed as a table header (like <caption>)
Inherit	Specifies that the value of the display property should be inherited from the parent element.

The difference between visibility and display in JavaScript