13518219792
网站建设资讯

NEWS

网站建设资讯

CSSdisplay:none和visibility:hidden区别

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

创新互联建站长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为永春企业提供专业的网站设计制作、成都网站制作，永春网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

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. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. 实例演示：CSS display:none和visible:hidden的区别 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13. 
  
  
  
  14. +GetXYWH($('CnLei_1')).W);">点击这里CSS display:none;
     
    15. 
  
  
  
  15. 
  
  
  
  16. +GetXYWH($('CnLei_2')).W);">点击这里visibility:hidden;
     
    17. 
  
  
  
  17. 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显示布局错乱解决方案

    新闻标题：CSSdisplay:none和visibility:hidden区别
    网站地址：http://cdysf.com/article/cdddhdi.html

    其他资讯