[Java教程]display 與 visibility

0

2016-06-24 23:00:05

項目開發中經常會遇到需要顯示和隱藏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文檔流。

我們寫代碼測試下：

```

use css dispaly

use css visibility

```

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

再測試下ng-show, ng-if

```

use ng-show directive...use ng-if directive...

```

結果如下：

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

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

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

```

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

$(":input").focus();//12

```

這段代碼功能是在頁面加載后，設置鼠標焦點到input框里面；實際測試這種場景可以正常使用。

但是 11,12行調換位置后，設置鼠標焦點事件就不會生效了。

本文網址：http://www.shaoqun.com/a/234025.html

*特別聲明：以上內容來自于網絡收集，著作權屬原作者所有，如有侵權，請聯系我們：admin@shaoqun.com。

0

總結

以上是生活随笔為你收集整理的java visibility_[Java教程]display 与 visibility的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。