The difference between visibility and display in JavaScript

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.

When display is set to block, all elements in the container will be treated as a separate block, like the <div> element, which is placed on the page at that point. (You can actually set the <span> display:block so that it can work like <div>.)

Setting display to inline will make its behavior as inline as the element---even if it is an ordinary block element such as <DIV>, it will also be combined to image <span> that output stream.

Finally, display is set: None, when the element is actually removed from the page, and the element underneath it is automatically followed. (Display:none is applied at this point, the element is equivalent to vanishing, while the Visibility:hidden is only hidden, and the position is still.) ）

The difference between visibility and display in JavaScript