[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")
}
});