17370845950

使用 visibility: hidden 可隐藏元素并保留其布局空间。1. 设置 .hide-element { visibility: hidden; } 类，通过 classList.toggle('hide-element') 控制显隐；2. 使用 [data-visible="false"] { visibility: hidden; } 属性选择器，配合 setAttribute 动态控制 data-visible 属性实现显示状态切换。该方法不破坏文档流，适用于需保留占位的隐藏场景。

要隐藏元素但保留其在页面中的布局空间，可以使用 visibility: hidden 或通过 CSS 属性选择器或 class 来控制显示状态。

使用 visibility: hidden 隐藏元素（保留布局）

这个方法会让元素不可见，但仍然占据文档流中的空间。

与 display: none 不同，display: none 会完全从布局中移除元素，而 visibility: hidden 只是“隐形”，位置还在。

通过 class 控制隐藏状态

定义一个用于隐藏的 class，然后动态添加或移除它来控制元素显隐。

HTML 中：

JavaScript 可以切换 class：

使用属性选择器控制隐藏

你可以自定义 HTML 属性，比如 data-visible，然后用属性选择器来控制样式。

HTML 示例：

用 JavaScript 修改属性即可控制显示：

这种方式适合需要通过语义化属性控制样式的场景，结构清晰且易于维护。

基本上就这些。用 visibility 配合 class 或属性选择器，既能隐藏元素，又不会影响原有布局。不复杂但容易忽略细节。