display 與 visibility

項目開發中常常會遇到須要顯示和隱藏DOM元素。經常使用的兩個是display，visibility屬性，高級點的會用到angularJS的ng-show,ng-if指令。

W3標準對這個兩個屬性的解釋以下：

1. display 設置元素如何顯示。

2. visibility 設置元素是否可見。

dispaly: none|inline|block

 - none: 此元素不會被顯示。
 - inline: 默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
 - block: 此元素將顯示爲塊級元素，此元素先後會帶有換行符。

visibility: visible|hidden|collapse

 - visibile: 默認。元素框是可見的。
 - hidden: 元素框不可見，但仍然影響佈局。
 - collapse: 當在表格元素中使用時，此值可刪除一行或一列，可是它不會影響表格的佈局。
             被行或列佔據的空間會留給其餘內容使用。若是此值被用在其餘的元素上，
             會呈現爲 "hidden"。

兩個屬性都能控制元素顯示和隱藏，他們之間的區別在於：

設置display : none 後，元素再也不佔據DOM文檔流位置；
設置visibility : hidden 後，元素依舊佔據DOM文檔流。

咱們寫代碼測試下：

<div style="display:none"><p>use css dispaly</p> <input type="text"></div>
<div style="visibility:hidden"><p>use css visibility</p> <input type="text"></div>

F12 打開控制檯查看元素，很明顯使用了visibility：hidden的元素仍是佔據了DOM位置，而display:none的元素則不佔據文檔位置。

再測試下ng-show, ng-if

<div ng-show="isShow">use ng-show directive...<div>
<div ng-if="isShow">use ng-if directive...<div>

結果以下：

1. ng-show : 實際是使用了display:none;

2. ng-if : 實際是remove相應的 DOM 節點

擴展下，在元素不可見的狀況下，能不能觸發標準的事件呢？好比，在頁面加載完成後，觸發focus事件。

$(":input").parent().css({"visibility" : "visible"});//11
$(":input").focus();//12

這段代碼功能是在頁面加載後，設置鼠標焦點到input框裏面；實際測試這種場景能夠正常使用。可是 11,12行調換位置後，設置鼠標焦點事件就不會生效了。