display 與 visibility

leanote 發布于2019-08-01 15:22 / 3243人閱讀

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

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

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

display 設置元素如何顯示。

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...

結果如下：

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

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

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

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

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

GPU云服務器云服務器 visible visibility displays Display

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49867.html

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

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

selfimpr 2019-08-30 15:54 評論0 收藏0
【CSS】CSS 世界 -- 元素的顯示與隱藏學習總結

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

wyk1184 2019-08-29 17:20 評論0 收藏0
display 與 visibility

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

junfeng777 2019-08-30 13:07 評論0 收藏0
Better than yesterday-前端【display:none與visibility:h

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

jemygraw 2019-08-26 10:47 評論0 收藏0
visible選擇器

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

nanchen2251 2019-08-21 14:06 評論0 收藏0