好看的历史书籍推荐,择天记

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

CSSdisplay:none和visibility:hidden區(qū)別

你知道CSS display:none和visibility:hidden的區(qū)別嗎，這里和大家分享一下，使用CSS display:none屬性后，HTML元素（對(duì)象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性后，HTML元素（對(duì)象）僅僅是在視覺(jué)上看不見(jiàn)（完全透明），而它所占據(jù)的空間位置仍然存在。

創(chuàng)新互聯(lián)建站長(zhǎng)期為1000+客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為永春企業(yè)提供專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作，永春網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

CSS display:none和visibility:hidden的區(qū)別

visibility:hidden隱藏，但在瀏覽時(shí)保留位置；CSS display:none視為不存在，且不加載！

Overflow屬性值{visible|hidden|scroll|auto}前提是先要限制DIV的寬度（width）和高度（height）。二者都是隱藏HTML元素，在視覺(jué)效果上沒(méi)有區(qū)別，但在一些DOM操作中二者還是有所不同的。

CSS display:none;

使用該屬性后，HTML元素（對(duì)象）的寬度、高度等各種屬性值都將“丟失”;

visibility:hidden;

使用該屬性后，HTML元素（對(duì)象）僅僅是在視覺(jué)上看不見(jiàn)（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說(shuō)它仍具有高度、寬度等屬性值。

具體區(qū)別請(qǐng)看演示代碼吧：

 
 
 
  
  
  
  
  
  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
  
   
  
  
   
  
  
   
  
  
  實(shí)例演示：CSS display:none和visible:hidden的區(qū)別 
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  
  
  
  
+GetXYWH($('CnLei_1')).W);">點(diǎn)擊這里CSS display:none;
 
  
  
  
  
  
  
+GetXYWH($('CnLei_2')).W);">點(diǎn)擊這里visibility:hidden;
 
  
  
  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};

}

【編輯推薦】

使用CSS display:none時(shí)注意事項(xiàng)
CSS display:inline和float:left兩者區(qū)別
深入探究DIV CSS布局中position屬性用法
CSS屬性display:inline-block使用揭秘
CSS display:block顯示布局錯(cuò)亂解決方案

文章名稱(chēng)：CSSdisplay:none和visibility:hidden區(qū)別
文章URL：http://fisionsoft.com.cn/article/cdddhdi.html

新聞中心

其他資訊