国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

display 與 visibility

junfeng777 / 2298人閱讀

摘要：項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到需要顯示和隱藏元素。標(biāo)準(zhǔn)對這個(gè)兩個(gè)屬性的解釋如下設(shè)置元素如何顯示。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。但是行調(diào)換位置后，設(shè)置鼠標(biāo)焦點(diǎn)事件就不會(huì)生效了。

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

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

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

visibility 設(shè)置元素是否可見。

dispaly: none|inline|block

 - none: 此元素不會(huì)被顯示。
 - inline: 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。
 - block: 此元素將顯示為塊級元素，此元素前后會(huì)帶有換行符。

visibility: visible|hidden|collapse

 - visibile: 默認(rèn)。元素框是可見的。
 - hidden: 元素框不可見，但仍然影響布局。
 - 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文檔流。

我們寫代碼測試下：

use css dispaly
 


use css visibility

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

再測試下ng-show, ng-if

use ng-show directive...


use ng-if directive...

結(jié)果如下：

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

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

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

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

這段代碼功能是在頁面加載后，設(shè)置鼠標(biāo)焦點(diǎn)到input框里面；實(shí)際測試這種場景可以正常使用。
但是 11,12行調(diào)換位置后，設(shè)置鼠標(biāo)焦點(diǎn)事件就不會(huì)生效了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115322.html

相關(guān)文章

  • CSS魔法堂：display:none與visibility:hidden的恩怨情仇

    摘要：不耽誤表單提交數(shù)據(jù)雖然我們無法看到的元素，但當(dāng)表單提交時(shí)依然會(huì)將隱藏的元素的值提交上去。讓元素在見面上不可視，但保留元素原來占有的位置。不過由于各瀏覽器實(shí)現(xiàn)效果均有出入，因此一般不會(huì)使用這個(gè)值。繼承父元素的值。 前言 ?還記得面試時(shí)被問起請說說display:none和visibility:hidden的區(qū)別嗎？是不是回答完display:none不占用原來的位置，而visibilit...

    selfimpr 評論0 收藏0

  • 【CSS】CSS 世界 -- 元素的顯示與隱藏學(xué)習(xí)總結(jié)

    摘要：應(yīng)用場景用戶上傳頭像，實(shí)時(shí)顯示并裁減實(shí)現(xiàn)方式模塊外部容器設(shè)置，剪裁區(qū)域里面放一個(gè)加載效果，設(shè)置。圖片尺寸獲取成功后，再正常初始化，然后讓外部容器屬性重置為。這樣體驗(yàn)就會(huì)好很多，用戶只會(huì)看到加載中剪裁界面，而不是占位界面加載中最終操作界面。 一、Display 幾種隱藏方式 1、希望元素不可見、不占據(jù)空間、輔助設(shè)備無法訪問、不渲染 使用標(biāo)簽：

    wyk1184 評論0 收藏0

  • display 與 visibility

    摘要：項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到需要顯示和隱藏元素。標(biāo)準(zhǔn)對這個(gè)兩個(gè)屬性的解釋如下設(shè)置元素如何顯示。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。但是行調(diào)換位置后，設(shè)置鼠標(biāo)焦點(diǎn)事件就不會(huì)生效了。 項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到需要顯示和隱藏DOM元素。常用的兩個(gè)是display，visibility屬性，高級點(diǎn)的會(huì)用到angularJS的ng-show,ng-if指令。 ...

    leanote 評論0 收藏0

  • Better than yesterday-前端【display:none與visibility:h

    display:none;與visibility:hidden; 相同點(diǎn)：兩者都能實(shí)現(xiàn)元素的隱藏 區(qū)別：display:none;元素并不會(huì)占據(jù)任何物理空間，但是visibility:hidden只是看不到，但是物理上還是存在的【也就是說如果使用display:none;原本該元素占用的空間會(huì)在頁面布局上消失】 實(shí)例： display:non...

    jemygraw 評論0 收藏0

  • visible選擇器

    摘要：由于的精簡，以置于之前的的代碼不能運(yùn)行了，其中選擇器就是其中一個(gè)?？偨Y(jié)最終我選擇了最后一種，功能能夠滿足現(xiàn)有的需求。其實(shí)很強(qiáng)大，這選擇器只是其九牛一毛，后面可以再學(xué)習(xí)學(xué)習(xí)其思想。 現(xiàn)在移動(dòng)端項(xiàng)目在重構(gòu)階段，將之前的jQuery全部替換成Zepto了。由于Zepto的精簡，以置于之前的jQuery的代碼不能運(yùn)行了，其中visible選擇器就是其中一個(gè)。既然已經(jīng)選擇了Zepto，那就給Ze...

    nanchen2251 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<