元素的显示与隐藏

Posted 2020-11-24 dragonir

一些比较好的隐藏实践

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;
}

其他情况待补充