[CSS] display:none和visibility:hidden的差別

  • 247285
  • 0
  • 2010-01-10

[CSS] display:none和visibility:none的差別

前言

在使用css隱藏欄位或物件的時候,

常常會使用到display:none和visibility:hidden這兩個屬性,

但卻很容易分不清楚這兩個的差別,

或是乾脆同時使用兩種屬性,來確保物件一定被隱藏,

其實我們可以很簡單的來區分兩者的差別。

 

實際演練

首先,我們先拉出一個Table如下,

<table id="table1">
    	<tr>
    		<td>
    			1
    		</td>
    		<td>
    			2
    		</td>
    	</tr>
    	<tr>
    		<td>
    			3
    		</td>
    		<td>
    			4
    		</td>
    	</tr>
    </table>

執行後看起來會像這樣子

12
34

 

首先我們替第二行的 tr 加上 style="visibility:hidden"

<tr style="visibility:hidden">

可以發現我們的Table會變成這樣

12
34

所以當使用 visibility:hidden 時,

物件是確實的被隱藏的,但物件的位置仍舊保持著不會消失

 

再來我們將第二行的tr改成  style="display:none"

<tr style="display:none">

我們的Table會變成

12
34

可以看到第二行連空白也消失了,

所以當使用 style="display:none" 時,

物件連原本所在的位置都一起被隱藏了

 

總結

若我們需要把一個物件完全的隱藏,

那我們應該要使用 display:none ,

它可以將物件連同所在位置一起隱藏,

就好像真的在網頁上完全消失了,

而實際上JQuery的hide及show也是在透過操作display屬性來實現的,

所以當需要在網頁上預設某些物件是隱藏時,

不需要透過jquery一個一個的去寫

$(物件).hide();

直接替物件加上屬性 display:none 就可以囉!