The difference between visibility and display in JS

<span id="Label3"></p> <ol class="dp-c" start="1"> <li class="alt"><li class="alt">Most people can easily confuse CSS property display with visibility, they seem to be no different, in fact, their differences are very large.</li></li> <li><li>The visibility property is used to determine whether an element is displayed or hidden, which is represented by the visibility=<span class="string">"visible|hidden", the visible representation of the display, and the hidden representation of the Hidden. When visibility is set to <span class="string">"hidden", the element is hidden, but it still occupies its original position. Example:</span> </span></li></li> <li class="alt"><li class="alt"><pre><script language= "JavaScript" > <span style="color: #0000ff;">function</span> <span style="color: #000000;"> togglevisibility (me) { </span><span style="color: #0000ff;">if</span> ( me.style.visibility== "hidden"<span style="color: #000000;">) { me.style.visibility</span>= "visible"<span style="color: #000000;">; } </span> <span style="color: #0000ff;">Else</span> <span style="color: #000000;">{ me.style.visibility</span>= "hidden"<span style="color: #000000;">; } } </span> </script> <div onclick= "togglevisibility (this)" style= "position:relative" > </pre><p></p></li></li> <li><li>The first line of text will trigger <span class="string">the "hidden" and <span class="string">"visible" properties, Noting the change in the second Line. </div><div> because visibility retains the position of the element, the second row does not move .</div></span> </span></li></li> <li class="alt"><li class="alt"></li></li> <li><li>Effect:</li></li> <li class="alt"><li class="alt"></li></li> <li><li></li></li> <li class="alt"><li class="alt">The first line of text will trigger <span class="string">the "hidden" and <span class="string">"visible" properties, Noting the change in the second Line. </span></span></li></li> <li><li>Because visibility retains the position of the element, the second row does not Move.</li></li> <li class="alt"><li class="alt"></li></li> <li><li></li></li> <li class="alt"><li class="alt">Notice that when the element is hidden, it is no longer possible to receive other events, so in the first code, when it is set to <span class="string">"hidden", it can no longer receive the response to the event, so it is not possible to click the first paragraph of the mouse to display the Text. On the other hand, the display property is a little Different. The Visibility property is a hidden element but maintains the floating position of the element, and display is actually a floating feature of the set Element. 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 padded. Here's a look at the code and effects of my example:</span></li></li> <li><li></li></li> <li class="alt"><li class="alt">Cases:</li></li> <li><pre><script language= "JavaScript" ><span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">toggledisplay (me) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(me.style.display== "block"<span style="color: #000000;"><span style="color: #000000;">) {me.style.display</span></span>= "inline"<span style="color: #000000;"><span style="color: #000000;">; Alert (</span></span>"the text is now: ' inline '."<span style="color: #000000;"><span style="color: #000000;">); } </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Else</span></span><span style="color: #000000;"><span style="color: #000000;"> { </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(me.style.display== "inline"<span style="color: #000000;"><span style="color: #000000;">) {me.style.display</span></span>= "none"<span style="color: #000000;"><span style="color: #000000;">; Alert (</span></span>The text is Now: ' None '. Automatically re-displays after 3 seconds. "<span style="color: #000000;"><span style="color: #000000;">); Window.settimeout (</span></span>"bluetext.style.display= ' Block ';", +, "JavaScript"<span style="color: #000000;"><span style="color: #000000;">); } </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Else</span></span><span style="color: #000000;"><span style="color: #000000;">{me.style.display</span></span>= "block"<span style="color: #000000;"><span style="color: #000000;">; Alert (</span></span>"the text is now: ' block '."<span style="color: #000000;"><span style="color: #000000;">); } } } </span></span></script> <div> in <span id= "bluetext" onclick= "toggledisplay (this)"<span style="color: #000000;"><span style="color: #000000;">style</span></span>= "color:blue;position:relative;cursor:hand;" > Blue </span> Text Click to see the effect .</div></pre><p><p></p></p></li> <li><li></li></li> <li class="alt"><li class="alt">Effect:</li></li> <li><li></li></li> <li class="alt"><li class="alt"></li></li> <li><li>Click on the blue text to see the Effect.</li></li> <li><li>(go, do the project today encountered this problem!) ）</li></li> </ol><p><p>The difference between visibility and display in JS</p></p></span>