<html> <head> <style type="text/css"> .test1 { border: 5px solid orange; } .test2 { margin-top: 10px; border: 5px solid; color: #f00; } .test3 { margin-top: 10px; border: 5px solid; color: #000; } </style> <script type="text/javascript"> function bt1() { var btObj = document.getElementById("b1"); if (btObj.value == "隐藏-A") { // 占据空间 document.getElementById("t1").style.visibility = "hidden"; btObj.value = "显示-A"; } else { document.getElementById("t1").style.visibility = "visible"; btObj.value = "隐藏-A"; } } function bt2() { var btObj = document.getElementById("b2"); if (btObj.value == "隐藏-B") { // 释放空间 document.getElementById("t2").style.display = "none"; btObj.value = "显示-B"; } else { document.getElementById("t2").style.display = "block"; btObj.value = "隐藏-B"; } } </script> </head> <body> <div id="t1" class="test1">隐藏且占据空间!</div> <div id="t2" class="test2">隐藏并释放空间!</div> <div id="t3" class="test3">GGGGGGGGGGGGGGGG</div><hr> <input type="button" id="b1" value="隐藏-A" onclick="bt1()"> <input type="button" id="b2" value="隐藏-B" onclick="bt2()"> </body> </html>
Dhtml - 隐藏的两种方式
猜你喜欢
转载自cc-index.iteye.com/blog/1671635
今日推荐
周排行