div的显示和隐藏

本文从学习角度出发，仅当做笔记。高手可以忽略本文。

 

借助div的display属性可以实现div的显示或隐藏，而且在隐藏后不占用原来显示的空间。

js控制显示和隐藏的代码：

<script type="text/javascript">
        function showDiv(obj){
        document.getElementById(obj).style.display="";
        //alert('已经显示');
        }
    function hideDiv(obj){
        document.getElementById(obj).style.display="none";
        //alert('已经隐藏');
        }
    </script>

HTML：

    <input name="btnShow" type="button" value="显示" onClick="showDiv('div1');">
    <input name="btnHide" type="button" value="隐藏" onClick="hideDiv('div1');">
    <div id="div1" style=" width:300px; height:200px; border:1px solid red;">
       show it
    </div>

这个有时候在界面的设计上会用得到。