CSS controls Div display/hide methods and compares original code conversion methods

Source: Internet
Author: User

From http://blog.csdn.net/czf164

"

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 .)

"

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.