Most people can easily confuse the display and visibility attributes of CSS. They seem to have no difference, but they actually have a big difference.
The visibility attribute is used to determine whether the element is displayed or hidden. Visibility = "visible | hidden" is used to indicate that the element is displayed. Visibility indicates that the element is hidden. When visibility is set to "den", although the element is hidden, it still occupies its original position. Example:
<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 second row does not move. </div> effect:
The first line of text triggers the "hidden" and "visible" attributes. Pay attention to the changes in the second line.
Because visibility retains the position of the element, the second row will not move. note that when an element is hidden, it cannot receive any other event, so 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>. Finally, the display is set to none. In this case, the element is actually removed from the page, and the element under it is automatically filled. The code and effect of my instance are as follows: for example, <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>
