CSS controls Div display/hide and compares the original code using two methods

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.