元素的显隐

Mr.LRH2025/4/8大约 3 分钟

元素的显隐

操作元素的显隐

元素不可见，同时不占据空间，辅助设备无法访问，同时不渲染，可使用 <script> 标签隐藏。
<script> 标签是不支持嵌套的，因此，如果希望在 <script> 标签中再放置其他不渲染的模板内容，可以试试使用 <textarea> 元素。
<script> 标签隐藏内容获取使用 script.innerHTML ，<textarea> 使用 textarea.value。
```
<script type="text/html"> 
  <img src="1.jpg"> 
</script>

<script type="text/html">
  <img src="1.jpg"> 
  <textarea style="display:none;"> 
    <img src="2.jpg"> 
  </textarea> 
</script>
```
元素不可见，同时不占据空间，辅助设备无法访问，但资源有加载，DOM 可访问，可以直接使用 display: none 隐藏。
元素不可见，同时不占据空间，辅助设备无法访问，但显隐的时候可以有 transition 淡入淡出效果，可使用： .hidden { position: absolute; visibility: hidden; }
元素不可见，不能点击，辅助设备无法访问，但占据空间保留，可使用 visibility: hidden 隐藏。

元素不可见，不能点击，不占据空间，但键盘可访问，可使用 clip 剪裁隐藏。

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

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

元素不可见，不能点击，但占据空间，且键盘可访问，则可以试试 relative 隐藏。

/* 如果条件允许，也就是和层叠上下文之间存在设置了背景色的父元素，则也可以使用更友好的z-index 负值隐藏 */
.lower {
  position: relative;
  z-index: -1;
}

元素不可见，但可以点击，而且不占据空间，则可以使用透明度。

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

元素看不见，但位置保留，依然可以点可以选，则直接让透明度为 0 。
```
.opacity {
  opacity: 0;
  filter: Alpha(opacity=0);
}
```

标签受限的情况下希望隐藏某文字，可能使用 text-indent 缩进。

.hidden {
  /* 希望显示的时候可以加一个 transition 动画，就可能要使用 max-height 进行隐藏 */
  max-height: 0;
  overflow: hidden;
}

display 与元素的显隐

对一个元素而言，如果 display 计算值是 none 则该元素以及所有后代元素都隐藏，如果是其他 display 计算值则显示。

display:none 的元素的 <img> ,所有浏览器下依旧都会请求图片资源。
display:none 的元素是无法被点击的
display:none 显隐控制并不会影响 CSS3 animation 动画的实现，但是会影响 CSS3 transition 过渡效果执行。
对于计数器列表元素，如果设置 display:none，则该元素加入计数队列。

HTML 中有很多标签和属性天然 display: none，如 <style>、<script>和 HTML5 中的 <dialog> 元素，如果这些标签在 <body> 元素中，设置 display:b lock 是可以让内联 CSS 和 JavaScript 代码直接在页面中显示的。

visibility 与元素的显隐

visibility CSS 属性显示或隐藏元素而不更改文档的布局。支持的属性有：

visible ：元素框可见。
hidden ：元素框不可见（不绘制），但仍然影响常规的布局。
collapse ：对于不同的元素有不同的效果。
- 用于 <table> 行、列、列组和行组，将隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相当）。
- 折叠的弹性元素和 ruby 元素会被隐藏，它们本来将要占用的空间会被移除。
- 对于其他元素，collapse 被视为与 hidden 相同。

visibility 的继承性

父元素设置 visibility: hidden ，子元素也会看不见，究其原因是继承性，子元素继承了 visibility: hidden。
如果子元素设置了 visibility: visible，则子元素又会显示出来。

visibility: hidden 不会影响 CSS 计数器的计数。

visibility 不会影响 CSS3 transition 过渡效果执行

贡献者

lrh