從隱藏元素談起

前言

個人部落格：Damonare的個人部落格

    說起隱藏元素我想每一個前端er都能說起幾種，但能說全的我想就不是很多了。博主總結了幾種隱藏元素的方法，總結如下表格：

	overflow	opacity	visibility	display	position	clip(clip-path)	z-index
屬性值	hidden	0	hidden	none	absolute	rect()/inset()/polygon()	-1000

我們為什麼會需要這麼多隱藏元素的方法呢，而且他們看起來實現的都是同樣的效果。其實每一種方法實際上都有一些細微的不同，這些不同決定了在一些特定場合下使用哪一種方法。我們下面細細探討下這些細微之處. 1. overflow

.hide{     overflow:hidden; /* 佔據空間，無法點擊 */ }

overflow的hidden用來隱藏元素溢出部分，佔據空間，無法響應點擊事件。 2.opacity

.hide{    opacity:0;/* 佔據空間，可以點擊 */}.hide_2{    -webkit-filter:opacity(0);    filter:opacity(0);/* 佔據空間，可以點擊 */}

過濾元素filter也可使用opacity值設定透明度，不過filter現在的相容性不好，只支援webkit核心，這裡順帶一提。

opacity是用來設定元素透明度的，但當設定成0的時候也就相當於隱藏元素了。因此，元素依然存在原來的位置，佔據空間也可響應事件。如果你打算使用 opacity 屬性在讀屏軟體中隱藏元素，很不幸，你並不能如願。元素和它所有的內容會被讀屏軟體閱讀，就像網頁上的其他元素那樣。換句話說，元素的行為就和它們不透明時一致。 3.visibility

.hide{    visibility:hidden; /* 佔據空間，無法點擊 */}

如同 opacity 屬性，被隱藏的元素依然會對我們的網頁布局起作用。與 opacity 唯一不同的是它不會響應任何使用者互動。此外，元素在讀屏軟體中也會被隱藏 4.display

.hide{    display:none;/* 不佔據空間，無法點擊 */ }

經典的display隱藏元素,這個是徹底的隱藏了元素，不佔據空間，也就不影響布局，當然也無法響應事件。 5.position

.hide{    position：absolute;    left:-99999px;    top:-90999px;/* 不佔據空間，無法點擊 */ }.hide——2{    position：relative;    left:-99999px;    top:-90999px;/* 佔據空間，無法點擊 */ }

假設有一個元素你想要與它互動，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity 和 visibility 影響布局， display 不影響布局但又無法直接互動——譯者注）。在這種情況下，你只能考慮將元素移出可視地區。這個辦法既不會影響布局，有能讓元素保持可以操作。下採用這種辦法未嘗不可 6.clip/clip-path

.hide{    position:absolute;/*fixed*/    clip:rect(top,right,bottom,left);/* 佔據空間，無法點擊 */ }.hide_2 {  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);}

隱藏元素的另一種方法是通過剪裁它們來實現。在以前，這可以通過 clip 屬性來實現，但是這個屬性被廢棄了(現在瀏覽器依然支援)，換成一個更好的屬性叫做 clip-path。clip-path屬性實在是用處大大滴有，可以很容易的實現一些複雜的圖形大漠老師分享的一個連結，該連結裡的圖形大多都是用clip-path的polygon值來實現的。但可惜的是依舊只能在chrome40+瀏覽器裡使用. 7.z-index

.hide{    position:absolute;    z-index:-1000;/* 不佔據空間，無法點擊 */ }

通過設定z-index值使其它元素遮蓋該元素也算是一種隱藏了。 後記

在這篇教程裡，我們看了 7 種不同的通過 CSS 隱藏元素的方法。每一種方法都與其他幾種有一點區別。知道你想要實現什麼有助於你決定採用哪一個屬性，隨著時間推移，你就能根據實際需求本能地選擇最佳方式了。如果你對於隱藏元素的這些方法還有任何問題，請在評論中留言。