首頁  >  文章  >  web前端  >  隱藏dom元素的三種css方法是什麼

隱藏dom元素的三種css方法是什麼

青灯夜游
青灯夜游原創
2021-12-09 16:01:044351瀏覽

隱藏dom元素的三種css方法:1、為dom元素加上「visibility:hidden;」樣式;2、為dom元素加上「diaplay:none;」樣式;3、為dom元素加上「 opacity:0;”樣式。

隱藏dom元素的三種css方法是什麼

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

隱藏dom元素的三種css方法

#1、visibility:hidden;

將它的值設為hidden將隱藏我們的元素。如同opacity屬性,被隱藏的元素仍會對我們的網頁版面運作。與opacity唯一不同的是它不會響應任何用戶互動。此外元素在讀屏軟體中會被隱藏。

2、diaplay:none;

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

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

    不過請注意,透過DOM依然可以存取到這個元素。因此你可以透過DOM來操作它。就跟其他未被隱藏的元素一樣,例如$(“”)等

3、opacity:0;

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

(學習影片分享:css影片教學

以上是隱藏dom元素的三種css方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn