Div 可见与不可见的两种方法

本文对比了CSS中display和visibility属性的区别,特别是当元素隐藏时的行为差异。通过具体实例展示了两种属性设置为不可见状态时,元素在页面布局中所占空间的变化。

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

主要是display 和 visibility 属性

 见下面的代码:

js 代码
  1.   
  2.   
  3. "显示第一个层" οnclick="showfistDiv();">   
  4. "显示第二个层" οnclick="showsecDiv();">   
  5. "border:1px solid #000;display:none">www.eudown.com
  6. "border:1px solid #000;visibility:hidden">www.78land.com
      
  7.   
  8. <script language=< span="">"javascript">   
  9.   var b = new Object();   
  10.   b = document.getElementById("fly");   
  11.      
  12.   var c = new Object();   
  13.   c = document.getElementById("fine");   
  14.   
  15.   function showfistDiv() {   
  16.    b.style.display="";   
  17.   }   
  18.   function showsecDiv() {   
  19.    c.style.visibility="visible";   
  20.   }   
  21. </script>  
  22.   

  

附加:2007-04-28

visibility  属性在设置为 hidden  时 ,在页面上并不释放 对象的空间

display  属性 设置为 none 时 则释放空间,这个特性在用在 对象(如:div)无限级 递归 上 很有用。

笔者最近在做无限级动态树的时候,用的纯div 实现,就遇到了上面的问题。起初采用的visibility 属性,结果树的兄弟节点之间

会随着相应子节点的增加,间距变大!! 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值