常见JavaScript页面部分内容显示/隐藏设置总结

项目中经常遇到通过js判断对页面中某一部分进行显示/隐藏设置的场景，经常使用的是display，有时也会使用visibility、opacity，为此，特意查询了相关内容，对其进行了一下汇总记录下：

除了 display，在控制 div 元素的显隐时，还有一些常用的 CSS 属性可以使用。这些包括：

1、visibility

● 描述：visibility 属性用于控制元素是否可见。与 display: none 不同，visibility: hidden 会让元素变得不可见，但仍占据原本的位置，影响布局。
● 用法：visibility: hidden 或 visibility: visible。
● 适用场景：

• 用于你希望元素保持在文档流中，但不需要显示的场景。
• 例如，某些动画效果中，可以暂时隐藏元素，但不希望影响布局或页面的其它内容。

.hidden {
  visibility: hidden; /* 隐藏，但占位 */
}
.visible {
  visibility: visible; /* 显示 /
}

● 与 display 的区别：

• display: none 会完全从页面中移除元素，不占据空间。
• visibility: hidden 会使元素不可见，但仍会占据布局中的空间。

2. opacity

● 描述：opacity 属性用于设置元素的透明度。透明度为 0 时，元素完全透明；为 1 时，元素完全不透明。值的范围是 0 到 1。
● 用法：opacity: 0（完全透明，元素不可见）到 opacity: 1（完全不透明）之间的任意值。
● 适用场景：

• 当需要通过透明度变化来实现渐隐或渐显效果时。常用于动画、过渡效果等场景。
• 注意，opacity 不会影响元素的位置，它依然会占据页面布局。

.transparent {
  opacity: 0; / 完全透明，不影响布局 */
}
.opaque {
  opacity: 1; /* 不透明 /
}

● 与 display的区别：

• opacity: 0 会让元素不可见，但它仍然占据页面空间。
• display: none 会完全从页面中移除元素，不占据任何空间。

3. position 配合 top/left (绝对定位或固定定位)

● 描述：通过设置元素的 position: absolute 或 position: fixed，你可以将元素移动到视口之外（例如 top: -9999px 或 left: -9999px），使元素看起来不可见。虽然它仍然存在于文档流中，但它被移动到屏幕外，不会影响页面显示。
● 适用场景：
用于动态隐藏元素，通过移动到视口之外达到隐藏效果，通常用于弹出层或动画效果中。

.hidden {
  position: absolute;
  top: -9999px; / 移动元素到视口外 /
}

● 与 display 的区别：

• position 配合 top/left 会让元素移出视口，但元素仍然占据空间。
• display: none 会完全移除元素，不占据任何空间。

4. visibility: collapse (表格相关)

● 描述：这个属性是专门为表格元素设计的，它可以隐藏表格行或列，且隐藏的行或列不会占据空间。
● 适用场景：
适用于表格行（<tr>）或列（<td>）的隐藏，常见于表格的动态显示隐藏效果。

.collapsed {  
  visibility: collapse; /* 在表格中隐藏行或列，且不占空间 */
}

● 与 display 的区别：

• visibility: collapse 在表格中相当于将行或列完全隐藏并且不占空间。对于非表格元素，visibility: hidden 才是通常的选择。

总结：不同方法的适用场景与区别

display: none：

● 行为：元素完全消失，不占据空间。
● 适用场景：需要彻底隐藏元素且不影响布局的情况，如动态内容的加载或菜单的显示/隐藏。

visibility: hidden：

● 行为：元素不可见，但仍占据空间。
● 适用场景：需要保留元素占据的布局空间，但隐藏显示内容的情况，如需要动画过渡时的隐藏。

opacity: 0：

● 行为：元素透明，不影响布局。
● 适用场景：透明度变化的场景，常用于过渡效果或者渐显/渐隐动画。

position: absolute/left: -9999px 等：

● 行为：将元素移出视口外，不显示但仍占据空间。
● 适用场景：元素需要隐藏，但不希望它完全被移除，且不希望它影响其他元素的位置。

visibility: collapse（表格特有）：

● 行为：表格行或列被隐藏且不占空间。
● 适用场景：用于动态隐藏表格行或列，常用于表格内容的显示控制。

何时使用：

• 使用display: none 适用于你希望元素完全消失并且不占空间的场景。
• 使用visibility: hidden 适用于你希望隐藏元素但仍然保留它的位置的场景。
• 使用opacity: 0 适用于需要透明效果或过渡动画时。
• 使用position 结合 top 或left适用于将元素移出视口，但仍占据原有布局的场景。
• 使用visibility: collapse 适用于表格的行或列隐藏效果。

这些属性各有不同的效果，选择时需根据具体的需求和效果来决定。

欢迎各位大神进行纠错指正，我们一起共同进步~~~