javascript中Style之visibility与display的比较.

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #测试 #html

本文通过一个简单的示例对比了CSS中visibility和display属性在控制元素显示与隐藏时的区别。visibility设置为hidden的元素虽然不可见但仍保留其在页面布局中的空间；而display设置为none的元素则从页面布局中完全移除，不占用任何空间。

它们都可以实现对域的隐藏，但visibility要占用域的空间，而display则不会！下面是一个测试

<html>
<head>
<title>标题测试</title>
<script language="javascript">
  function testVisibility()
  {
        document.all("tb_0").style.visibility="hidden";
       document.all("tb_1").style.visibility="visible";
  }
  function testDisplay()
  {
       document.all("tb_0").style.display="none";
       document.all("tb_1").style.display="block";
  }
  function test()
  {
      document.all("tb_0").style.visibility="visible";
      document.all("tb_1").style.visibility="visible";
      document.all("tb_0").style.display="block";
      document.all("tb_1").style.display="block";
  }
</script>
</head>
<body>
<form name="form1" method="post">
  <table id="tb_0">
   <tr>
    <td>内容测试--visible</td>
   </tr>
  </table>
  <table id="tb_1">
   <tr>
    <td>内容测试--hidden</td>
   </tr>
  </table>
  <input type="button" onClick="test();" value="还原">
  <input type="button" onClick="testVisibility();" value="测试visibility">
  <input type="button" onClick="testDisplay();" value="测试display">
</form>
</body>
</html>