恢复隐藏元素可见性的五种方法：一、JS设display为block等；二、removeProperty移除内联display；三、切换CSS类如.hidden/.visible；四、removeAttribute("style")重置内联样式；五、同步处理visibility和opacity隐藏。
如果您使用 HTML5 开发网页，发现某个元素被 JavaScript 设置为 display: none 或通过移除样式类导致内容不可见，则该元素在页面上处于隐藏状态。以下是恢复其可见性的多种操作方法：
一、通过 JS 修改 display 属性为 block
此方法直接覆盖内联样式中的 display: none，将元素显式设为块级显示，适用于已知元素类型为块级且无其他布局冲突的场景。
1、获取目标元素的 DOM 对象，例如使用 document.getElementById("myElement") 或 document.querySelector(".target")。
2、设置其 style.display 属性为 "block"，如：element.style.display = "block"。
立即学习“前端免费学习笔记（深入）”；
3、若原元素为行内元素（如 span），需根据实际需求设为 "inline" 或 "inline-block" 以保持原有流式布局。
二、移除内联 display 样式以回退到 CSS 规则
当元素的 display 是通过 JavaScript 写入内联样式隐藏时，删除该内联声明可使其重新遵循外部或内部 CSS 中定义的 display 值，避免硬编码值带来的适配问题。
1、调用 element.style.removeProperty("display") 方法。
2、执行后，浏览器将忽略内联 display 设置，转而应用层叠样式表中匹配的选择器规则。
3、确保 CSS 文件中对应选择器未定义 display: none，否则仍不可见。
三、切换预设的显示/隐藏 CSS 类
利用 classList API 切换包含 display 声明的 CSS 类，实现样式与行为分离，便于维护和复用。
1、在 CSS 中定义两个类：.hidden { display: none; } 和 .visible { display: block; }（或对应语义化类名）。
2、使用 element.classList.remove("hidden") 移除隐藏类。
3、再调用 element.classList.add("visible") 显式添加显示类；或更简洁地使用 element.classList.toggle("hidden") 实现状态翻转。
四、重置所有内联样式并仅保留 display 继承值
当元素存在多个干扰性内联样式（如 opacity、visibility、transform 等）时，清除全部内联样式可消除叠加影响，使 display 回归 CSS 层叠结果。
1、执行 element.removeAttribute("style") 删除整个 style 属性。
2、检查该元素在样式表中是否被其他规则（如父容器 overflow: hidden、祖先 visibility: hidden）间接隐藏。
3、必要时补充触发重排操作，例如读取 offsetHeight 以确保样式立即生效。
五、检查并覆盖 visibility 或 opacity 隐藏方式
部分隐藏并非由 display 引起，而是通过 visibility: hidden 或 opacity: 0 实现，此时修改 display 无效，需同步处理其他属性。
1、检测元素当前 computedStyle：getComputedStyle(element).visibility 是否为 "hidden"。
2、若为 true，则设置 element.style.visibility = "visible"。
3、同时检查 getComputedStyle(element).opacity 是否为 "0"，若是，设置 element.style.opacity = "1"。
