本文从学习角度出发,仅当做笔记。高手可以忽略本文。
借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间。
js控制显示和隐藏的代码:
1 <script type="text/javascript"> 2 function showDiv(obj){ 3 document.getElementById(obj).style.display=""; 4 //alert('已经显示'); 5 } 6 function hideDiv(obj){ 7 document.getElementById(obj).style.display="none"; 8 //alert('已经隐藏'); 9 } 10 </script>
HTML:
1 <input name="btnShow" type="button" value="显示" onClick="showDiv('div1');"> 2 <input name="btnHide" type="button" value="隐藏" onClick="hideDiv('div1');"> 3 <div id="div1" style=" width:300px; height:200px; border:1px solid red;"> 4 show it 5 </div>
这个有时候在界面的设计上会用得到。