元素的顯示與隱藏

一些比較好的隱藏實踐

1. 如果希望元素不可見，同時不占據空間，輔助設備無法訪問，同時不渲染，可以使用 <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.

2. 如果希望元素不可見，同時不占據空間，輔助設備無法訪問，但資源有加載，DOM可 訪問，則可以直接使用 display:none 隱藏

.dn {
`display: none;
}

3. 如果希望元素不可見，同時不占據空間，輔助設備無法訪問，但顯隱的時候可以有 transition 淡入淡出效果,則可以使用

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

4. 如果希望元素不可見，不能點擊，輔助設備無法訪問，但占據空間保留，則可以使用 visibility:hidden 隱藏

.vh {
  visibility: hidden;
}

5. 如果希望元素不可見，不能點擊，不占據空間，但鍵盤可訪問，則可以使用 clip 剪裁隱藏

.clip {
  position: absolute;
  clip: rect(0 0 0 0);
}
.out {
  position: relative;
  left: -999em;
}

6. 如果希望元素不可見，不能點擊，但占據空間，且鍵盤可訪問，則可以試試 relative 隱藏。例如，如果條件允許，也就是和層疊上下文之間存在設置了背景色的父元素， 則也可以使用更友好的 z-index 負值

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

7. 如果希望元素不可見，但可以點擊，而且不占據空間，則可以使用透明度

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

8. 如果單純希望元素看不見，但位置保留，依然可以點可以選，則直接讓透明度為 0

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

9. 在標簽受限的情況下希望隱藏某文字，可能使用 text-indent 縮進是最友好的方法

.text {
  text-indent: -100%;
}

10. 如果希望顯示的時候可以加一個 transition 動畫，就 可能要使用 max-height 進行隱藏了

.hidden {
  max-height: 0;
  overflow: hidden;
}

其他情況待補充