Example explanation of the difference between style.display and style.visibility in JS_javascript skills

In JS, you can control whether an element is displayed by setting the style.display or style.visibility attributes. When style.display=block and style.visibility=visible, the element is displayed. When style.display=none and style.visibility= When hidden, the element is hidden. The biggest difference between them is that when hidden by style.display=none, the element does not occupy its original position and is separated from the document flow, and subsequent elements fill its position. When hidden through style.visibility=hidden, the element still occupies the original position, but is hidden.

The following example illustrates this difference: In this example, divContent1 and divContent2 are hidden using style.display=none. At this time, the following divs will move upward and occupy the already hidden divs. space. divContent3 and divContent4 use style.visibility=hidden to hide them, but they still occupy the original space after being hidden.