[Java教程]display 與 visibility

0

2016-06-24 23:00:05

項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)遇到需要顯示和隱藏DOM元素。常用的兩個(gè)是display，visibility屬性，高級(jí)點(diǎn)的會(huì)用到angularJS的ng-show,ng-if指令。

W3標(biāo)準(zhǔn)對(duì)這個(gè)兩個(gè)屬性的解釋如下：

1. display 設(shè)置元素如何顯示。

2. visibility 設(shè)置元素是否可見(jiàn)。

```

dispaly: none|inline|block

- none: 此元素不會(huì)被顯示。

- inline: 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。

- block: 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。

visibility: visible|hidden|collapse

- visibile: 默認(rèn)。元素框是可見(jiàn)的。

- hidden: 元素框不可見(jiàn)，但仍然影響布局。

- collapse: 當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，但是它不會(huì)影響表格的布局。

被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他的元素上，

會(huì)呈現(xiàn)為 "hidden"。

```

兩個(gè)屬性都能控制元素顯示和隱藏，他們之間的區(qū)別在于：

設(shè)置display : none 后，元素不再占據(jù)DOM文檔流位置；

設(shè)置visibility : hidden 后，元素依舊占據(jù)DOM文檔流。

我們寫(xiě)代碼測(cè)試下：

```

use css dispaly

use css visibility

```

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

再測(cè)試下ng-show, ng-if

```

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

```

結(jié)果如下：

1. ng-show : 實(shí)際是使用了display:none;

2. ng-if : 實(shí)際是remove相應(yīng)的 DOM 節(jié)點(diǎn)

擴(kuò)展下，在元素不可見(jiàn)的情況下，能不能觸發(fā)標(biāo)準(zhǔn)的事件呢？比如，在頁(yè)面加載完成后，觸發(fā)focus事件。

```

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

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

```

這段代碼功能是在頁(yè)面加載后，設(shè)置鼠標(biāo)焦點(diǎn)到input框里面；實(shí)際測(cè)試這種場(chǎng)景可以正常使用。

但是 11,12行調(diào)換位置后，設(shè)置鼠標(biāo)焦點(diǎn)事件就不會(huì)生效了。

本文網(wǎng)址：http://www.shaoqun.com/a/234025.html

*特別聲明：以上內(nèi)容來(lái)自于網(wǎng)絡(luò)收集，著作權(quán)屬原作者所有，如有侵權(quán)，請(qǐng)聯(lián)系我們：admin@shaoqun.com。

0

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。