[CSS] Display v.s. Visibility

有時候總是搞混 CSS 的 disable 及 visibility。簡單來說，visibility 只是將指定物件的內容隱藏起來，實際上物件仍會被 Render 出來。若使用 disable, 則會連同物件也一起隱藏。而 jQuery 的 show() 及 hide() 則是透過 disable 的操作來實現隱藏或顯示效果。

jQuery 很方便，但有時為了不想太依賴框架，會想用原生的 JavaScript 來操作物件的顯示或隱藏。雖然不是很直覺，且要寫的落落長，但還是紀錄一下：

//display 操作
element.style.display = 'none';           // Hide = $(object).hide();
element.style.display = 'block';          // Show = $(object).show();
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

//visibility 操作
element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show