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.

<title>test</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style> .titlediv{background-color: #505050;color:white;font-weight:bold;padding:10px;cursor:pointer } .contentdiv{border:3px solid #505050;height:100px;padding:10px; } </style> <div class="titlediv" onclick="toggle('divContetn1')"> </div>Click here (the content part will be hidden, and the content below will come up)<div class="contentdiv" id="divContetn1"> </div>This is some content to show and hide <p> </p> <div class="titlediv" onclick="toggle('divContetn2')"> </div>click here<div class="contentdiv" id="divContetn2"> </div>This is some content to show and hide <p> </p> <div class="titlediv" onclick="showhide('divContetn3')"> </div>Click here (the content part will be hidden, and the content below will not come up)<div class="contentdiv" id="divContetn3"> </div>This is some content to show and hide <p> </p> <div class="titlediv" onclick="showhide('divContetn4')"> </div>click here<div class="contentdiv" id="divContetn4"> </div>This is some content to show and hide