css control div display/hide method and comparison of the two methods original code transfer_html/css_WEB-ITnose

Reprinted from http://blog.csdn.net/czf164

"

display and visibility in CSS

display and visibility in css Visibility syntax, they can hide and show html elements. They are very similar, so many people still make mistakes.
The attributes are as follows:

display:none|block;
display:none; hides the html element. To be precise, it eliminates the element in the browser and does not occupy the screen space. If there are other elements below it, it will be moved up to the space area (like there is one on the table). 100 yuan, now I put it in the drawer and hide it. The place where the 100 yuan is placed on the table can be placed on anything else)
dispaly:block; Displays the hidden html element if it is occupied by other elements. When the space is reached, he will move down and the space will be occupied by the original element again (take the 100 yuan out of the drawer and put it back on the table)

visibility: hidden|visible;
visibility: hidden; hides the element, it is really hidden, but it still occupies that space. (There is 100 yuan on the table. I covered it with the tablecloth and the money is still there). visibility:visible; Let the element display (remove the tablecloth and see 100 yuan). Let’s use code as an example. The code:

<.>

                  <p class="sycode">                 <     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     >                  </p>

Run the code in the box and you can see that when testD is hidden, all the boxes inside are hidden, and the divV and buttons below are moved up, and when divV When it is hidden, only it is hidden, and other elements inside are not hidden (the main thing here is to set the style attribute of the div element inside to display and visible. If it is removed, it will be hidden, but the button will still not move up. You can try it. )

"