javascript中Style之visibility与display的比较.

于 2007-07-16 14:29:00 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 测试 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/coomon2000/article/details/1693561
本文通过一个简单的示例对比了CSS中visibility和display属性在控制元素显示与隐藏时的区别。visibility设置为hidden的元素虽然不可见但仍保留其在页面布局中的空间；而display设置为none的元素则从页面布局中完全移除，不占用任何空间。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

它们都可以实现对域的隐藏，但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>

 
立行独见
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值