CSS隱藏頁面元素的5種方法說明

用 CSS 隱藏頁面元素有許多種方法。你可以將 opacity 設為 0、將 visibility 設為 hidden、將 display 設為 none 或將 position 設為 absolute 然後將位置設為不可見區域。

你有沒有想過，為什麼我們要有這麼多技術來隱藏元素，而它們看起來都實現的是同樣的效果？每一種方法實際上與其他方法之間都有一些細微的不同，這些方法決定了在一個特定的場合下使用哪一個方法。這篇教學將涵蓋到那些你需要記住的細小不同點，讓你根據不同情況選擇上面這些方法中適合的方法來隱藏元素。

Opacity

opacity 屬性的意思是設定一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這意味著將 opacity 設為 0 只能從視覺上隱藏元素。而元素本身依然佔據它自己的位置並對網頁的佈局起作用。它也將響應用戶互動。

.hide {
  opacity: 0;
}

如果你打算使用opacity 屬性在讀取螢幕軟體中隱藏元素，很不幸，你並不能如願。元素和它所有的內容會被讀屏軟體閱讀，就像網頁上的其他元素一樣。換句話說，元素的行為就和它們不透明時一致。

我還要提醒一句，opacity 屬性可以用來實現一些效果很棒的動畫。任何 opacity 屬性值小於 1 的元素也會建立一個新的堆疊上下文（stacking context）。

當你的滑鼠移到被隱藏的第 2 個的區塊上，元素狀態平滑地從完全透明過渡到完全不透明。區塊也將 cursor 屬性設定為了 pointer，這說明了用戶可以與它互動。

Visibility

第二個要說的屬性是 visibility。將它的值設為 hidden 將隱藏我們的元素。如同 opacity 屬性，被隱藏的元素仍然會對我們的網頁佈局起作用。與 opacity 唯一不同的是它不會響應任何用戶互動。此外，元素在讀取螢幕軟體中也會被隱藏。

這個屬性也能夠實現動畫效果，只要它的初始和結束狀態不一樣。這確保了 visibility 狀態切換之間的過渡動畫可以是時間平滑的（事實上可以用這一點來用 hidden 實現元素的延遲顯示和隱藏——譯者註）。

.hide {
   visibility: hidden;
}

注意，如果一個元素的visibility 被設定為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility 明確設定為visible 即可（就如例子裡面的.o-hide p－譯者註）。試著只 hover 在隱藏元素上，不要 hover 在 p 標籤裡的數字上，你會發現你的滑鼠遊標沒有變成手指頭的樣子。此時，你點擊滑鼠，你的 click 事件也不會被觸發。

而在

標籤裡面的

標籤則依然可以捕捉所有的滑鼠事件。一旦你的滑鼠移動到文字上，

本身變得可見並且事件註冊也隨之生效。

Display

display 屬性依照詞義真正隱藏元素。將 display 屬性設為 none 確保元素不可見且連盒模型也不產生。使用這個屬性，被隱藏的元素不佔據任何空間。不僅如此，一旦 display 設為 none 任何對該元素直接打使用者互動操作都不可能生效。此外，讀螢幕軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。

任何這個元素的子孫元素也會被同時隱藏。為這個屬性新增過渡動畫是無效的，它的任何不同狀態值之間的切換總是會立即生效。

不過請注意，透過 DOM 依然可以存取到這個元素。因此你可以透過 DOM 來操作它，就像操作其他的元素。

.hide {
   display: none;
}

你將看到第二個區塊元素內有一個

元素，它自己的display 屬性被設定成block，但它仍然不可見。這是 visibility:hidden 和 display:none 的另一個不同之處。在前一個例子裡，將任何子孫元素visibility 明確設定成visible 可以讓它變得可見，但是display 不吃這套，不管自身的display 值是什麼，只要祖先元素的display 是none，它們就都不可見。

現在，將滑鼠移到第一個區塊元素上面幾次，然後點擊它。這個運算會讓第二個區塊元素顯現出來，它其中的數字將會是一個大於 0 的數。這是因為，元素即使被這樣設定成對使用者隱藏，還是可以透過 JavaScript 來進行操作。

Position

Suppose there is an element that you want to interact with, but you don’t want it to affect the layout of your web page. There are no suitable attributes to handle this situation (opacity and visibility affect the layout, display does not affect the layout but cannot directly Interaction - translator's note). In this case, you can only consider moving the element out of the visible area. This method does not affect the layout and keeps the elements operable. Here is the CSS using this approach:

.hide {
position: absolute;
top: -9999px;
left: -9999px;
}

The main principle of this method is to set the top and left of the element to a large enough negative number to make it invisible on the screen. One benefit (or potential drawback) of using this technique is that the content of elements it hides can be read by screen-reading software. This is completely understandable, since you are simply moving the element outside of the visible area so that the user cannot see it.

You should avoid using this method to hide any focusable element, because doing so will cause an unpredictable focus switch when the user gives that element focus. This method is often used when creating custom checkboxes and radio buttons. (Use DOM to simulate checkboxes and radio buttons, but use this method to hide the real checkbox and radio elements to "receive" the focus switch - Translator's Note)

Clip-path

Another way to hide elements is by clipping them. Previously, this could be achieved via the clip property, but this property has been deprecated in favor of a better property called clip-path. Read Nitish Kumar's recent SitePoint article "Introducing the clicp-path attribute" to learn more advanced uses of this attribute.

Remember, the clip-path property is not yet fully supported in IE or Edge. If you want to use external SVG files in your clip-path, browser support is even lower. The code to hide an element using the clip-path attribute looks like this:

.hide {
clip-path: polygon(0px 0px,0px ​​0px,0px ​​0px,0px ​​0px);
}

If you hover the mouse over the first element, it can still affect the second element, even though the second element is hidden via clip-path. If you click on it, it will remove the hidden class and make our element visible from that position. Text in hidden elements can still be read by screen reading software. Many WordPress sites use clip-path or the previous clip to implement text specifically provided for screen reading software.

Although our element itself is no longer visible, it still occupies the size of the rectangle it should occupy, and the elements around it behave as if it were visible. Remember that user interactions such as mouseovers or clicks will not take effect outside the clipping area. In our case, the clipping area size is zero, which means the user will not be able to interact directly with the hidden element. Additionally, this property enables the use of various transition animations to achieve different effects.

Conclusion

In this tutorial, we looked at 5 different ways to hide elements with CSS. Each method is a little different from the others. Knowing what you want to achieve will help you decide which attribute to use, and over time you'll be able to instinctively choose the best approach based on your actual needs.

以上是CSS隱藏頁面元素的5種方法說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！