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

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

"