CSS display:none和visibility:hidden区别
创始人
2024-07-14 03:41:25
0

你知道CSS display:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏,但在浏览时保留位置;CSS display:none视为不存在,且不加载!

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度(width)和高度(height)。二者都是隐藏HTML元素,在视觉效果上没有区别,但在一些DOM操作中二者还是有所不同的。

CSS display:none;

使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

具体区别请看演示代码吧:

  1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2.  
  3.  
  4.  
  5. 实例演示:CSS display:none和visible:hidden的区别 
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12. +GetXYWH($('CnLei_1')).W);">点击这里CSS display:none;

     
  13. +GetXYWH($('CnLei_2')).W);">点击这里visibility:hidden;

     
  14. CnLei_1
 
  • CnLei_2
  •  
  •  
  •  
  • varw3c=(document.getElementById)?true:false;  
  • varagt=navigator.userAgent.toLowerCase();  
  • varie=((agt.indexOf("msie")!=-1)  
  • &&(agt.indexOf("opera")==-1)&&(agt.indexOf("omniweb")==-1));  
  • varie5=(w3c&&ie)?true:false;  
  • varns6=(w3c&&(navigator.appName=="Netscape"))?true:false;  
  •  
  • function$(o){  
  • returndocument.getElementById(o)?document.getElementById(o):o;  
  • }  
  •  
  • functionGetXYWH(o){  
  • varo=$(o);  
  • varnLt=0;  
  • varnTop=0;  
  • varoffsetParent=o;  
  • while(offsetParent!=null&&offsetParent!=document.body){  
  • nLt+=offsetParent.offsetLeft;  
  • nTop+=offsetParent.offsetTop;  
  • if(!ns6){  
  • parseInt(offsetParent.currentStyle.borderLeftWidth)>0?  
  • nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):"";  
  • parseInt(offsetParent.currentStyle.borderTopWidth)>0?  
  • nTop+=parseInt(offsetParent.currentStyle.borderTopWidth):"";  
  • }  
  • offsetParentoffsetParent=offsetParent.offsetParent;  
  • }  
  • return{X:nLt,Y:nTop,W:o.offsetWidth,H:o.offsetHeight};  
  • }  
  •  
  •  
  •  
  •  
  • 【编辑推荐】

    1. 使用CSS display:none时注意事项
    2. CSS display:inline和float:left两者区别
    3. 深入探究DIV CSS布局中position属性用法
    4. CSS属性display:inline-block使用揭秘
    5. CSS display:block显示布局错乱解决方案

     

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
    为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...