The difference between visibility and display in JAVASCRIPT style _javascript tips

When the visibility is set to "hidden", the element is hidden, but it still occupies its original position.
---------------------------------------------------------------
Example:

Copy Code code as follows:

<script language= "JavaScript" >
function Togglevisibility (Me) {
if (me.style.visibility== "hidden") {
me.style.visibility= "visible";
}
else {
Me.style.visibility= "hidden";
}
}
</script>
<div onclick= "togglevisibility (This)" style= "Position:relative" > The first line of text will trigger the "hidden" and "visible" attributes, noting the change in the second row. </div>
<div> because visibility retains the position of the element, the second row does not move up or down, although the first row is missing but the position is still there. </div>

Explanation: Note that when the element is hidden, no other events can be received, so in the first code, when it is set to "hidden", it can no longer receive the response to the event, so it is not possible to click the first paragraph of text to make it appear.
---------------------------------------------------------------
On the other hand, the display property is a little different. The Visibility property is a hidden element that retains the floating position of the element, and display is actually a floating feature that sets the element.
When display is set to block (blocks), all elements in the container will be treated as a separate block, just like the <div> element, it will be placed into the page at that point. (You can actually set the <span> display:block to work like <div>.)
Setting display to inline will make it behave as if it were an element inline---even if it is an ordinary block element such as &LT;DIV&GT, it will be combined to image <span> output stream.
--------------------------------------------------------------
Example:

Copy Code code as follows:

<script language= "JavaScript" >
function Toggledisplay (Me) {
if (me.style.display== "block") {
me.style.display= "inline";
Alert ("Text is now: ' inline '.");
}
else {
if (me.style.display== "inline") {
Me.style.display= "None";
Alert ("Text is now: ' None '.) Automatically re-display after 3 seconds. ");
Window.settimeout ("bluetext.style.display= ' block ';", 3000, "JavaScript");
}
else {
me.style.display= "Block";
Alert ("Text is now: ' Block '.");
}
}
}
</script>
<div> in <span id= "Bluetext" onclick= "Toggledisplay (This)" style= "Color:blue;position:relative;cursor:hand;" > Blue </span> Text on Click to view effect .</div>

---------------------------------------------------------------
Finally, display is set: None, when the element is actually removed from the page, and the element underneath it is automatically filled in. (At this point the Display:none element is equivalent to disappearing, while the Visibility:hidden is only hidden, and the position is still there.) ）
---------------------------------------------------------------
Display properties are block, inline, none value, and use Visibility:hidden for debugging example:

Copy Code code as follows:

<p><span id= "Ospan" style= "Background-color: #CFCFCF;" >this is a span</span> in a sentence.</p>
<P>
<input Type=button value= "Inline" onclick= "ospan.style.display= ' Inline '" >
<input Type=button value= "block" onclick= "ospan.style.display= ' Block" >
<input Type=button value= "None" onclick= "ospan.style.display= ' None '" >
<input Type=button value= "Hidden" onclick= "ospan.style.visibility= ' Hidden ' ><input Type=button ' value=" Visible "onclick=" ospan.style.visibility= ' Visible ' ">
</P>
<UL>
<LI> sets the element to block, and wraps the element after it. </LI>
<LI> setting the element to inline eliminates element wrapping. </LI>
<LI> sets the element to none, hiding the element content. </LI>
</UL>

"It's too hard":
At the same time, the difference between display:inline and float:left can be read in the article:
(display refers to the displayed state, inline means inline, is characterized by clinging to the previous inline element, usually the default inline element has Span,a,em,strong, etc.). Float, Float:left, is a floating form of block-level elements, and is a form of two states. ) http://www.andymao.com/andy/post/42.html
Http://bbs.blueidea.com/thread-2596793-1-1.html

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>float &inline</title>
<style>
*{text-align:center;padding:4px;}
Div,p{text-align:left;}
span{/*float:right;*/background: #f5f5f5 border-left:1px #eee solid;border-top:1px #eee solid;border-right:1px #ccc solid;border-bottom:1px #ccc Solid;}
Ul#inline li{display:inline list-style:none;border-left:1px #ccc solid;width:300px; background: #f5f5f5; * float: left*/;}
Ul#float li{float:left;display:inline list-style:none;border-left:1px #666 solid;width:300px; background: #f5f5f5;}
</style>
<body>
<span style= "width:300px;" >span is an inline/inline element, giving him a width assignment is not effective. </span>
<span style= "width:100px; Float:right; " >span is an inline/inline element, giving him a width assignment of 100px+float:right; you can see the width. </span>
<div>
<p> This li is defined as an inline/inline, setting the width without effect </p>
<ul id= "inline" >
<li>test</li>
<li>test</li>
</ul>
</div>
<div>
<p> This li is defined as an inline/inline+float:left, setting the width of the effect </p>
<ul id= "float" >
<li>test</li>
<li>test</li>
</ul>
</div>
</body>