不一樣場景下使用CSS隱藏元素

使用 CSS 讓元素不可見的方法不少，剪裁、定位到屏幕外、明度變化等都是能夠的。雖然它們都是肉眼不可見，但背後卻在多個維度上都有差異。

元素不可見，同時不佔據空間、輔助設備沒法訪問、不渲染

使用 script 標籤隱。例如：

<script type="text/html">
    <img src="1.jpg">
</script>

此時，圖片 1.jpg 是不會有請求的。<script> 標籤是不支持嵌套的，所以，若是但願在 <script> 標籤中再放置其餘不渲染的模板內容，能夠試試使用 <textarea> 元素。例如：

<script type="text/html">
    <img src="1.jpg">
    <textarea style="display: none;">
        <img src="2.jpg">
    </textarea>
</script>

一樣 2.jpg 也是不會有請求的。
另外，<script> 標籤隱藏內容獲取使用 script.innerHTML，<textarea> 使用 textarea.value。

元素不可見，同時不佔據空間、輔助設備沒法訪問，但資源有加載，DOM 可訪問

使用 display: none 隱藏。例如：

.dn {
    display: none;
}

元素不可見，同時不佔據空間、輔助設備沒法訪問，但顯隱的時候能夠有 transition 淡入淡出效果

使用 position: absolute 和 visibility: hidden; 隱藏。例如：

.hidden {
    position: absolute;
    visibility: hidden;
}

元素不可見，不能點擊、輔助設備沒法訪問，但佔據空間保留

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

.hn {
    visibility: hidden;
}

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

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

.clip {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.out {
    position: relative;
    left: -999em;
}

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

使用 relative 和 z-index 隱藏。例如，若是條件容許，也就是和層疊上下文之間存在設置了背景色的父元素，則也能夠使用更友好的 z-index 負值隱藏。例如：

.lower {
    position: relative;
    z-index: -1;
}

元素不可見，能夠點擊、不佔據空間

使用透明度隱藏。例如：

.lower {
    position: relative;
    opacity: 0;
    filter: Alpha(opacity=0);
}

元素不可見，能夠點擊、能夠選擇、佔據空間

使用透明度隱藏。例如：

.lower {
    opacity: 0;
    filter: Alpha(opacity=0);
}

你們能夠經過實際的隱藏場景選擇合適的隱藏方法。

實際開發場景變幻無窮，可能還有更多的隱藏方法，也歡迎你們積極留言探討。

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