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

資訊專欄INFORMATION COLUMN

display 與 visibility

leanote / 3240人閱讀

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

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

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

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

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

dispaly: none|inline|block

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

visibility: visible|hidden|collapse

 - visibile: 默認。元素框是可見的。
 - hidden: 元素框不可見，但仍然影響布局。
 - collapse: 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。
             被行或列占據(jù)的空間會留給其他內(nèi)容使用。如果此值被用在其他的元素上，
             會呈現(xiàn)為 "hidden"。

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

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

我們寫代碼測試下：

use css dispaly
 


use css visibility

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

再測試下ng-show, ng-if

use ng-show directive...


use ng-if directive...

結(jié)果如下：

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

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

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

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

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

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

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

相關(guān)文章

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

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

    selfimpr 評論0 收藏0

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

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

    wyk1184 評論0 收藏0

  • display 與 visibility

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

    junfeng777 評論0 收藏0

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

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

    jemygraw 評論0 收藏0

  • visible選擇器

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

    nanchen2251 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<