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

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

出處: https://dotblogs.com.tw/kirkchen/2009/12/22/12603

前言

在使用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>

執行後看起來會像這樣子

1 2
3 4

 

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

<tr style="visibility:hidden">

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

1 2
   

所以當使用 visibility:hidden 時,

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

 

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

<tr style="display:none">

我們的Table會變成

1 2

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

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

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

 

總結

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

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

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

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

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

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

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

$(物件).hide();

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

 

JQuery使用範例:

$("input[class='system-btn']").each(function () {
   
  if ($(this).val() == "退回申請人") {
   //$(this).attr("style", "visibility: hidden") //visibility: hidden
     $(this).attr("style", "display:none") //display:none
  }

  if ($(this).val() == "啟用加會簽") {
   //$(this).attr("style", "visibility: hidden")
     $(this).attr("style", "display:none")
   }
});