Differences between visibility and display in JAVASCRIPT style

When visibility is set to "den", although the element is hidden, it still occupies its original position.
---------------------------------------------------------------
Example:
Copy codeThe Code is 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 triggers the "hidden" and "visible" attributes. Pay attention to the changes in the second line. </Div>
<Div> because visibility retains the position of the element, the content in the second row is not moved up or down even though the first row is invisible. </Div>

Note: When an element is hidden, it cannot receive any other event. Therefore, in the first code, when it is set to "hidden, you can no longer receive responses to events, so you cannot click the first text to display it.
---------------------------------------------------------------
On the other hand, the display attribute is a little different. The visibility attribute is used to hide an element but keep the floating position of the element. display is actually used to set the floating feature of the element.
When the display is set to block, all elements in the container will be treated as a separate block, just like the <div> element, it will be put into the page at that point. (In fact, you can set <span> display: block to work like <div>.
Setting display to inline will make its behavior the same as the element inline-even if it is a common block element such as <div>, it will also be combined into output streams like <span>.
--------------------------------------------------------------
Example:
Copy codeThe Code is as follows:
<Script language = "JavaScript">
Function toggleDisplay (me ){
If (me. style. display = "block "){
Me. style. display = "inline ";
Alert ("the text is now 'inline '.");
}
Else {
If (me. style. display = "inline "){
Me. style. display = "none ";
Alert ("the text is now 'none'. It will be automatically re-displayed 3 seconds later. ");
Window. setTimeout ("blueText. style. display = 'block';", 3000, "JavaScript ");
}
Else {
Me. style. display = "block ";
Alert ("the text is now 'block '.");
}
}
}
</Script>
<Div> in <span id = "blueText" onclick = "toggleDisplay (this)" style = "color: blue; position: relative; cursor: hand; "> blue </span>: click on the text to view the effect. </div>

---------------------------------------------------------------
Finally, the display is set to none. In this case, the element is actually removed from the page, and the element below it will be automatically followed. (In this case, the elements that apply display: none; are equivalent to disappearing, while visibility: hidden; only indicates hiding and the position is still there .)
---------------------------------------------------------------
The display attribute is block, inline, none, and visibility: hidden. debugging example:
Copy codeThe Code is as follows:
<H1> debugging when the display attribute is block, inline, none, and visibility: hidden; <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 = 'den den '"> <input type = button value =" Visible "onclick =" oSpan. style. visibility = 'visable' ">
</P>
<UL>
<LI> If an element is set as a block, a line break is generated after the element. </LI>
<LI> setting an element as inline removes line breaks. </LI>
<LI> set the element to none to hide the content of the element. </LI>
</UL>

"Too difficult":
For more information about the differences between display: inline; and float: left, see the following article:
(Display refers to the display status, inline indicates inline, and is characteristic of keeping close to the previous inline element. Usually, the default inline elements include span, a, em, strong, etc. Float indicates floating, float: left, which is the floating form of block-level elements and two States of different forms .) Http://www.andymao.com/andy/post/42.html
Http://bbs.blueidea.com/thread-2596793-1-1.html
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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>
</Head>
<Body>
<Span style = "width: 300px;"> If span is an inline/inline element, it is ineffective to assign a value to its width. </Span>
<Span style = "width: 100px; float: right;"> If span is an inline/inline element, assign 100px + float: right to the width of the element. </Span>
<Div>
<P> This li is defined as inline/inline. Setting the width does not work. </p>
<Ul id = "inline">
<Li> test </li>
<Li> test </li>
</Ul>
</Div>
<Div>
<P> This li is defined as inline/inline + float: left. Setting the width is effective. </p>
<Ul id = "float">
<Li> test </li>
<Li> test </li>
</Ul>
</Div>
</Body>
</Html>