CSS Case Analysis and Display Visibility different attributes
Most people will be very easy CSS attribute display and visibility confusion, they seem no different, but in fact their is a big difference.
Visibility attribute is used to determine the elemental display or hide, with visibility = "visible | hidden", said visible, hidden Hide said. When visibility is set to "hidden", although hidden elements, but it continues to occupy 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 lines of text will trigger a "hidden" and "visible" property, pay attention to the second line changes. </ Div> <div> elements will be retained because visibility position, the second line will not be mobile. </ Div> effect:
The first lines of text will trigger a "hidden" and "visible" property, pay attention to the second line changes.
Visibility because of the location of elements will be retained, the second line will not be mobile. Noted that when the element is hidden, can not be still harder received other incidents, so in the first paragraph of the code, when it is set to "hidden" , can no longer receive a response to the incident, and there is no through mouse clicks, the first paragraph of his text are displayed. On the other hand, display attributes that are different. Visibility attribute is hidden elements while maintaining the position of the floating element, and set up display is actually a floating element characteristics. When the display is set to block (block), all of the elements of containers will be treated as a separate block, as <div> elements, it will be at that point Add to the page. (In fact you can set the display <span>: block, it can be the same as <div> work. Display will be set inline, and it acts like inline elements - even if it is ordinary block elements such as < div>, it will be combination of imaging <span>, as the output stream. final display is set is: none, when in fact the elements were removed from the page, which lies below the element will be automatically follow on the filling. below to see me and effectiveness of the code examples: Example: <script language="JavaScript">
Function toggleDisplay (me) (
If (me.style.display == "block") (
Me.style.display = "inline";
Alert ( "Now is the text: 'inline'.");
)
Else (
If (me.style.display == "inline") (
Me.style.display = "none";
Alert ( "Now is the text: 'none'. Automatically after three seconds to show that.");
Window.setTimeout ( "blueText.style.display = 'block';", 3000, the "JavaScript");
)
Else (
Me.style.display = "block";
Alert ( "Now is the text: 'block'.");
)
)
)
</ Script>
<div> In "span id =" blueText "onclick =" toggleDisplay (this) "
Style = "color: blue; position: relative; cursor: hand;"> blue </ span> Click on the text to see results. </ Div>
Tags: css attributes, css display, Display, div visibility, xhtml attributes
Leave a Reply