Display and visibility in CSS
Display and visibility syntaxes In css. They can both hide and display HTML elements. They are similar, so many people may make mistakes.
Their attributes are as follows:
Display: None | block;
Display: none; hide the HTML element. Specifically, this element is removed from the browser and does not occupy the screen space. If there are other elements under it, it will move to the area of the space (it seems that there is 100 yuan on the table, and now I hide it in the drawer, you can store anything else on the table for 100 RMB ).
Dispaly: block. The hidden HTML elements are displayed. If other elements occupy the space, the hidden HTML elements are moved down. (Re-extract 100 yuan from the drawer and put it back on the table)
Visibility: hidden | visible;
Visibility: hidden; hide this element. It is actually hidden, but it still occupies that space. At this moment (there is 100 yuan on the table. I covered the tablecloth to hide him, and the money is still there ).
Visibility: visible; show the elements (remove the tablecloth and see 100 RMB ).
UseCodeFor example, the Code:
<HTML>
<Head>
<SCRIPT type = "text/JavaScript">
Function testdisplay ()
{
VaR divd = Document. getelementbyid ("testd ");
If (divd. style. Display = "NONE ")
{
Divd. style. Display = "Block ";
}
Else
{
Divd. style. Display = "NONE ";
}
}
Function testvisibility ()
{
VaR divv = Document. getelementbyid ("testv ");
If (divv. style. Visibility = "hidden ")
{
Divv. style. Visibility = "visible ";
}
Else
{
Divv. style. Visibility = "hidden ";
}
}
</SCRIPT>
</Head>
</Body>
<Div id = "testd" style = "border: # DDD 1px solid">
<Div style = "display: block; Border: # CCC 2px solid">
<Div style = "visibility: visible; Border: # AAA 2px solid">
Display
</Div>
</Div>
</Div>
<Div id = "testv" style = "border: # DDD 1px solid">
<Div style = "display: Block ; Border: # CCC 2px solid ">
<Div style = "visibility: Visible ; Border: # AAA 2px solid ">
Visibility
</Div>
</Div>
</Div>
<Input type = "button" value = "testdisplay" onclick = "testdisplay ()"/>
<Input type = "button" value = "testvisibility" onclick = "testvisibility ()"/>
</Body>
</Html>
Run the code in the box to see that when testd is hidden, all the boxes in it are hidden, and the following divv and buttons are moved up. When divv is hidden, only hidden by himself does not hide any other elements in it. (Here, we mainly set the style attribute of the DIV element to display and visible. If this attribute is removed, it will also be hidden. However, the button will not move up. You can try it .)
This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/czf164/archive/2008/05/15/2447580.aspx
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
