不同場景下使用CSS隱藏元素

2022-07-04 03:57:09 字數 1306 閱讀 7594

使用 css 讓元素不可見的方法很多,剪裁、定位到螢幕外、明度變化等都是可以的。雖然它們都是肉眼不可見,但背後卻在多個維度上都有差別。

元素不可見,同時不佔據空間、輔助裝置無法訪問、不渲染

使用 script 標籤隱。例如:

此時, 1.jpg 是不會有請求的。同樣 2.jpg 也是不會有請求的。

另外,標籤隱藏內容獲取使用script.innerhtml使用textarea.value

元素不可見,同時不佔據空間、輔助裝置無法訪問,但資源有載入,dom 可訪問

使用display: none隱藏。例如:

.dn
元素不可見,同時不佔據空間、輔助裝置無法訪問,但顯隱的時候可以有transition淡入淡出效果

使用position: absolutevisibility: hidden;隱藏。例如:

.hidden
元素不可見,不能點選、輔助裝置無法訪問,但佔據空間保留

使用visibility: hidden;隱藏。例如:

.hn
元素不可見,不能點選、不佔據空間,但鍵盤可訪問

使用clip裁剪 或者relative隱藏。例如:

.clip 

.out

元素不可見,不能點選、但佔據空間、鍵盤可訪問

使用relativez-index隱藏。例如,如果條件允許,也就是和層疊上下文之間存在設定了背景色的父元素,則也可以使用更友好的z-index負值隱藏。例如:

.lower
元素不可見,可以點選、不佔據空間

使用透明度隱藏。例如:

.lower
元素不可見,可以點選、可以選擇、佔據空間

使用透明度隱藏。例如:

.lower
大家可以通過實際的隱藏場景選擇合適的隱藏方法。

摘自:《css世界》第10章 元素的顯示與隱藏

CSS隱藏元素

在製作網頁時,隱藏內容也是一種比較常用的手法,它的作用一般有 隱藏文字 隱藏鏈結 隱藏超出範圍的內容 隱藏彈出層 隱藏滾動條 清除錯位和浮動等等。使用css即可使以上提到的內容隱藏起來,幾種隱藏內容的方法 1 使用display none來隱藏所有內容 display none可以讓網頁中所有內容不...

css元素隱藏

這個方式會把空間都釋放了,在控制台也不顯示了,所以綁在元素上的事件也都沒有了。不能修改子孫節點的dispaly值顯示出來。2.opacity 0 這個方式只是把元素的透明度設定為0,也就是把它變得透明,它本身還是在的只是看不到了,所以空間就不會釋放,綁在上面的事件也都在,能正常使用。3.visili...

CSS隱藏元素

一說到隱藏元素,很多人會想到display none 其實除了它還有很多隱藏元素的方法,它們都有各自特點和屬性,今天就來介紹以下兩種 一 display 在將display之前我們來看看元素的分類 分類一 塊級元素 特點 獨佔一行,對寬高生效,如果不給寬度撐滿整行,如果不給高度隨著內容的增長而增長。...