2014年1月24日 星期五

HTML Javascript 常用 div 隱藏顯示方式

visibility:hidden/visible 隱藏時保留區塊大小。
display:none/block 隱藏時縮合整個區塊。

code snippet:


<html>
<head>
   <script type="text/javascript">
      function $(id){return document.getElementById(id);}
      function showDiv(id)
      {
         var os = $(id).style;
         if(os.display == "none")
         {
            os.display = "block";
            os.visibility="visible";
         }
         else
         {
            os.display = "none";
            os.visibility="hidden";
         }
      }
   </script>
</head>
<body>
<input type="checkbox" onclick="showDiv('div1');"/>
<hr>
<div id="div1" style="display:block;border:1px solid #000000">Test</div>
<hr>
</body>
</html>

沒有留言: