<html> <head> <title>HTML元素的显示与隐藏控制</title> <script type="text/javascript"> function showAndHidden1(){ var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); if(div1.style.display=='block') div1.style.display='none'; else div1.style.display='block'; if(div2.style.display=='block') div2.style.display='none'; else div2.style.display='block'; } </script> </head> <body> <div>display：元素的位置不被占用</div> <div id="div1" style="display:block; background:#eee;">DIV 1</div> <div id="div2" style="display:none; background:#fcc">DIV 2</div> <input type="button" onclick="showAndHidden1();" value="DIV切换" /> </body> </html>