Heim >Web-Frontend >HTML-Tutorial >css控制div显示/隐藏方法及2种方法比较原码 转_html/css_WEB-ITnose

css控制div显示/隐藏方法及2种方法比较原码 转_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:28:10859Durchsuche

转自http://blog.csdn.net/czf164

"

CSS中的display和visibility

css中display和visibility语法,他们都可以隐藏和显示html元素。看齐来他们很相似,所以很多人还是会搞错。
谈们的属性分别如下:

display:none|block;
display:none;时隐藏该html元素,确切的说,是在浏览器中消除该元素,不占屏幕的空间。若其下有其他元素,就会上移到该空间区域(好像桌子上有100块钱,现在我把它放在抽屉里藏起来,桌子上放100钱的地方可以放在其他任何东西)。
dispaly:block;显示已经隐藏的html元素,如果别的元素占有了该空间时,他将下移,空间重新别原来的元素占有。(把100块钱重新从抽屉里那出来放回桌子上)

visibility:hidden|visible;
visibility:hidden;隐藏该元素,正真的隐藏,但他还占有那块空间。这时,(桌子上有100块钱,这是我盖了桌布把他隐藏起来,钱还在那里)。
visibility:visible;让元素显示(拿掉了桌布,看到了100块钱)。

接下来用代码来举个例子,代码:

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


运行一下框中的代码就可以看到,当testD隐藏时,里面所有的框都隐藏,而且下面的divV和按钮都上移,而当divV隐藏的时候,只有他自己隐藏了,里面的其他元素都没有隐藏。(这里主要是把里面的div元素style属性设置为display和visible,如果去掉也会隐藏,但是,按钮还是不会上移,可以试一下。)

"

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn