新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> DIV+CSS >> CSS display:none和visibility:hidden区别

CSS display:none和visibility:hidden区别

查看次数16433 发表时间2012-12-15 20:39:52

 
这里向大家描述一下CSS display:none和visibility:hidden的区别,visibility:hidden隐藏,但在浏览时保留位置;而CSS display:none视为不存在,且不加载!

 

你知道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. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312"> 
  4. <head> 
  5. <head> 
  6. <title>实例演示:CSS display:none和visible:hidden的区别</title> 
  7. <metahttp-equivmetahttp-equiv="content-type"content="text/html;charset=gb2312"/> 
  8. <metahttp-equivmetahttp-equiv="content-type"content="text/html;charset=gb2312"/> 
  9. <metanamemetaname="author"content="枫岩,CnLei.y.l@gmail.com"> 
  10. <metanamemetaname="copyright"content="http://www.cnlei.com"/> 
  11. </head> 
  12. <body> 
  13. <p><ahrefahref="javascript:alert($('CnLei_1').innerHTML+'的宽度:\n'  
  14. +GetXYWH($('CnLei_1')).W);">点击这里CSS display:none;</a></p> 
  15. <p><ahrefahref="javascript:alert($('CnLei_2').innerHTML+'的宽度:\n'  
  16. +GetXYWH($('CnLei_2')).W);">点击这里visibility:hidden;</a></p> 
  17. <dividdivid="CnLei_1"style="CSS display:none;">CnLei_1</div> 
  18. <dividdivid="CnLei_2"style="visibility:hidden;">CnLei_2</div> 
  19.  
  20. <scripttypescripttype="text/javascript"> 
  21. varw3c=(document.getElementById)?true:false;  
  22. varagt=navigator.userAgent.toLowerCase();  
  23. varie=((agt.indexOf("msie")!=-1)  
  24. &&(agt.indexOf("opera")==-1)&&(agt.indexOf("omniweb")==-1));  
  25. varie5=(w3c&&ie)?true:false;  
  26. varns6=(w3c&&(navigator.appName=="Netscape"))?true:false;  
  27.  
  28. function$(o){  
  29. returndocument.getElementById(o)?document.getElementById(o):o;  
  30. }  
  31.  
  32. functionGetXYWH(o){  
  33. varo=$(o);  
  34. varnLt=0;  
  35. varnTop=0;  
  36. varoffsetParent=o;  
  37. while(offsetParent!=null&&offsetParent!=document.body){  
  38. nLt+=offsetParent.offsetLeft;  
  39. nTop+=offsetParent.offsetTop;  
  40. if(!ns6){  
  41. parseInt(offsetParent.currentStyle.borderLeftWidth)>0?  
  42. nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):"";  
  43. parseInt(offsetParent.currentStyle.borderTopWidth)>0?  
  44. nTop+=parseInt(offsetParent.currentStyle.borderTopWidth):"";  
  45. }  
  46. offsetParentoffsetParent=offsetParent.offsetParent;  
  47. }  
  48. return{X:nLt,Y:nTop,W:o.offsetWidth,H:o.offsetHeight};  
  49. }  
  50. </script> 
  51. </body> 
  52. </html>

CSS display:none使用注意事项

web页面前台编码时经常用到CSS display:none样式,平常使用时发现有几点特征需要注意

1、如果在样式文件或页面文件代码中直接用CSS display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。

2、使用CSS display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果。

3、如果是通过样式文件或<style>css</style>方式来设置元素的CSS display:none样式,用js设置style.display=""并不能使元素显示,可以使用block或inline等值来代替。通过style="CSS display:none"直接在元素上进行的设置不会有这个问题

4、有些情况下可以使用style.visibility来代替style.display,但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间,而style.display隐藏元素且让出所占页面空间。

 


(转发请注明转自:学PHP)    


  相关推荐



1楼 -1'说: 2016-01-28 03:24:25
1
2楼 Tasmine说: 2016-12-11 12:55:50
Thanks for your thohsutg. It's helped me a lot.

  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: