如何恢复元素隐藏前的display属性？或有无无需修改display的布局移除方案？

方法1：利用CSS类控制 #

定义一个专门用于隐藏元素的CSS类，通过添加/移除类实现隐藏和恢复，完全不需要修改元素自身的display属性：

.hidden {
  display: none !important;
}

JavaScript操作代码：

// 隐藏元素
element.classList.add('hidden');

// 恢复元素显示
element.classList.remove('hidden');

添加!important是为了确保该类样式优先级高于元素的内联style（如果元素本身设置了内联display的话）；若元素没有内联display样式，也可以省略!important。这种方式逻辑清晰，样式与行为分离，恢复时元素会自动回到原本的display状态。

方法2：使用HTML5原生hidden属性 #

HTML5提供原生hidden属性，设置该属性后元素会被隐藏（浏览器默认样式为display: none），移除属性后元素会恢复原来的显示状态：

// 隐藏元素
element.hidden = true;

// 恢复元素显示
element.hidden = false;

这个方法无需额外编写CSS，依赖浏览器原生支持，简洁高效。hidden属性的默认行为就是让元素脱离文档流（和display: none效果一致），不会保留元素的布局空间，完全符合需求。

这两种方法都不需要预先存储元素原本的display值，也不需要移动元素位置，可直接解决你遇到的问题。

内容的提问来源于stack exchange，提问作者Deane