Examples of differences between style. Display and style. Visibility in JS

In JS, you can set style. display or style. the visibility attribute is used to control whether the elements are displayed. display = block and style. when visibility = visible, the element is displayed in style. display = none and style. when visibility = hidden, the element is hidden. The biggest difference between them is that when the elements are hidden by style. Display = none, they do not occupy the original position and are separated from the document stream, and subsequent elements fill their positions. When the elements are hidden by style. Visibility = den, they are hidden.

The following example illustrates the difference: in this example, divcontent1 and divcontent2 use style when hiding. display = none. At this time, the following Div will move up to occupy the hidden Div space. Divcontent3 and divcontent4 are hidden by style. Visibility = hidden, but they still occupy the original space after being hidden.

<Textarea id = "runcode87009"> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <br/> <style>. titlediv {background-color: #505050; color: White; font-weight: bold; padding: 10px; cursor: pointer }. contentdiv {border: 3px solid #505050; Height: 100px; padding: 10px ;}</style> <p> click here (the content part is hidden and the following content will be displayed) this is some content to show and hide </P> click herethis is some content to show and hide </P> click here (the content part is hidden and the following content is not displayed) this is some content to show and hide </P> click herethis is some content to show and hide <p> </textarea>