亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS控制DIV層顯示和隱藏的實現(xiàn)方法

  發(fā)布時間：2016-07-01 14:23:41   作者：佚名   我要評論
本文給大家?guī)砹薈SS控制DIV層顯示和隱藏的方法，是前端學(xué)習(xí)必須要掌握的基礎(chǔ)知識，非常不錯，具有參考借鑒價值，感興趣的小伙伴一起學(xué)習(xí)吧

CSS中的display和visibility屬性

css中display和visibility可以隱藏和顯示html元素包括DIV層?？雌饋韮烧叻浅ｎ愃?，很多人會搞混。下面分別介紹兩者的屬性：

display:none|block;

display:none;

隱藏該html元素，確切的說，是在瀏覽器中消除該元素，不占屏幕的空間。若其下有其他元素，就會上移到該空間區(qū)域（好像桌子上有100塊錢，現(xiàn)在我把它放在抽屜里藏起來，桌子上放100錢的地方可以放在其他任何東西）。

dispaly:block;

顯示已經(jīng)隱藏的html元素，如果別的元素占有了該空間時，他將下移，空間重新別原來的元素占有。（把100塊錢重新從抽屜里那出來放回桌子上）。

visibility：hidden|visible;

visibility:hidden;

隱藏該元素，正真的隱藏，但他還占有那塊空間。這時，（桌子上有100塊錢，這是我蓋了桌布把他隱藏起來，錢還在那里）。

visibility:visible;

讓元素顯示（拿掉了桌布，看到了100塊錢）。

所以display和visibility控制的分別是html元素是否存在和是否顯示，display的屬性定義該元素存在或不存在，而visibility的屬性只是控制該元素是否顯示出來，實際上還是存在的。

接下來用代碼來舉個例子，代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <html>   
  2. <head>   
  3. <script type="text/javascript">   
  4. function testDisplay()   
  5. {   
  6.     var divD = document.getElementById("testD");   
  7.     if(divD.style.display=="none")   
  8.     {   
  9.         divD.style.display = "block";   
  10.     }   
  11.     else   
  12.     {   
  13.         divD.style.display = "none";   
  14.     }   
  15. }   
  16. function testVisibility()   
  17. {   
  18.     var divV = document.getElementById("testV");   
  19.     if(divV.style.visibility =="hidden")   
  20.     {   
  21.         divV.style.visibility ="visible";   
  22.     }   
  23.     else   
  24.     {   
  25.         divV.style.visibility = "hidden";   
  26.     }   
  27. }   
  28. </script>   
  29. </head>   
  30. </body>   
  31. <div id="testD" style="border:#ddd 1px solid">   
  32.     <div style="display:block;border:#ccc 2px solid">   
  33.         <div style="visibility:visible;border:#aaa 2px solid">   
  34.         Display   
  35.         </div>   
  36.     </div>   
  37. </div>   
  38. <div id="testV" style="border:#ddd 1px solid">   
  39.     <div style="display:block;border:#ccc 2px solid">   
  40.         <div style="visibility:visible;border:#aaa 2px solid">   
  41.         Visibility   
  42.         </div>   
  43.     </div>   
  44. </div>   
  45. <input type="button" value="TestDisplay" onclick="testDisplay()"/>   
  46. <input type="button" value="TestVisibility" onclick="testVisibility()"/>   
  47. </body>   
  48. </html>  

以上所述是小編給大家介紹的CSS控制DIV層顯示和隱藏的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • 關(guān)于div中img,span垂直居中的問題

    下面小編就為大家?guī)硪黄P(guān)于div中img,span垂直居中的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-26

  • 解決img在div中居中的問題

    下面小編就為大家?guī)硪黄鉀Qimg在div中居中的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-26

  • html5實現(xiàn)適用于手機(jī)端的div圖片放大預(yù)覽效果源碼

    這是一款html5實現(xiàn)適用于手機(jī)端的div圖片放大預(yù)覽效果源碼，共有4種不同的圖片放大預(yù)覽模式可供用戶選擇使用?？煞謩e針對鼠標(biāo)滑過、拖拽、點擊等進(jìn)行圖片放大顯示
    2016-09-21

  • DIV+CSS實現(xiàn)帶三角箭頭的提示框

    本文給大家?guī)硪欢未a基于div+css實現(xiàn)三角形提示框，代碼簡單易懂，需要的朋友可以參考下
    2016-09-20

  • div被iframe遮住的幾種情況及解決方法

    這篇文章給大家介紹了div被iframe遮住的一些情況，以及被遮住后的解決辦法，有需要的朋友們可以參考借鑒。
    2016-09-07

  • DIV點擊折疊實例代碼

    本文給大家?guī)硪欢魏诵拇a關(guān)于div點擊折疊效果，代碼簡單易懂，有需要的朋友可以參考下
    2016-08-31

  • DIV始終浮動在頁面底部

    在頁面底部浮動功能是如何實現(xiàn)的呢？下面小編給大家?guī)韉iv始終浮動在頁面底部的關(guān)鍵代碼，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
    2016-08-30

  • 設(shè)置一個DIV塊固定在屏幕中央的兩種方法(推薦)

    下面小編就為大家?guī)硪黄O(shè)置一個DIV塊固定在屏幕中央的兩種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-25

  • CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器

    這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-07-05

  • CSS文本和div垂直居中方法總結(jié)

    這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下
    2016-07-04

最新評論