CSS隱藏元素的五種方法

2022-06-12 01:54:12 字數 2004 閱讀 4248

1、opacity:0

2、visibility:hidden

3、diaplay:none

4、position:absolute

display

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

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

不過請注意,通過dom依然可以訪問到這個元。因此你可以通過dom來操作它。就跟其他未被隱藏的元素一樣,例如$(「」)等

position

有些時候,我們可能會遇到這樣一種情況,我們希望某個元素能夠不影響我們的頁面布局,但是我們又想與之互動這種情況下opacity 和 visibility會 影響布局, display 不影響布局但又無法直接互動,所以以上這三種都不能滿足這種需求,這時候我們就可以使用position這個屬性將元素移出可視區域,這樣既不會影響布局,又能讓元素可以操作。(就像又建了一層圖層)不過我們要避免使用這個方法去隱藏任何可以獲得焦點的元素,因為如果那麼做,當使用者讓那個元素獲得焦點時,會導致乙個不可預料的焦點切換問題。這個方法在建立自定義核取方塊和單選按鈕時經常被使用。

opacity:0

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

visibility

第二個要說的屬性是visibility。將它的值設為hidden將隱藏我們的元素。如同opacity屬性,被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何使用者互動。此外元素在讀屏軟體中會被隱藏。

注意,如果乙個元素的visibility被設定為hidden,同時想要顯示它的某個子孫元素,只要將那個元素的visibility顯式設定為visible即可。visibility與display:none不同的地方還在於被設定visibility:hidden的元素的子孫元素若是被設定成visibility: visible;的話,那麼該元素就是可見的,但是display:none則不同,即使它的子孫元素被設定成display:block,該子孫元素也是不可見的。

總結:

1、diaplay:none  真正意義上的隱藏,頁面原始碼都不顯示隱藏的頁面原始碼,隱藏的元素不占用任何空間,元素的盒空間都不生成,好像元素就不存在,但是可以通過dom操作訪問到,如$(" ")

2、position:absolute 為了不影響頁面布局又想與之互動,opacity 和 visibility會 影響布局, display 不影響布局但又無法直接互動 position屬性將元素移出原來的頁面顯示(像是頁面上的又一層)並可以與之互動,如填表單之類的可以使用

3、opacity:0 opacity屬性時設定元素的透明度,會影響頁面布局 但只是不可見 元素位置顯示一塊空白,會影響頁面互動操作

4、visibility:hidden  也只是顯示不可見,元素位置處顯示一塊空白,會影響布局,不過不會影響互動操作。

CSS CSS隱藏元素的五種方法

用css隱藏頁面元素有許多種方法。1 opacity 0 2 visibility hidden 3 display none 4 position absolute opacity opacity屬性的意思是設定乙個元素的透明度。它不是為改變元素的邊界框 bounding box 而設計的。這一位...

CSS隱藏元素的常用的3種方法

將它的值設為hidden將隱藏我們的元素。如同opacity屬性,被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何使用者互動。此外元素在讀屏軟體中會被隱藏。display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見並且連盒模型也不生成。...

CSS隱藏元素的幾種方法

css隱藏元素的幾種方法 1.display none 2.visibility hidden 3.clip path polygon 0px 0px,0px 0px,0px 0px,0px 0px 4.opacity 0 5.position absolute top 9999px left 99...