DOM元素动态切换显示状态的核心是操作style.display、style.visibility或hidden属性；display设为"none"完全隐藏且不占空间，visibility设为"hidden"透明但占位，hidden属性语义化且支持无障碍。

DOM 元素动态切换显示状态，核心是操作 style.display、style.visibility 或 hidden 属性，配合事件（如点击、鼠标移入等）实现即时响应。

用 display 控制显隐（最常用）

这是最直接的方式：设为 "none" 完全隐藏且不占布局空间；设为其他值（如 "block"、"inline"、"flex"）则恢复显示，并按对应方式参与布局。

• 先获取元素：

  const el = document.getElementById("myDiv");</li>
    <li>隐藏：<code>el.style.display = "none";

• 显示：el.style.display = "block";（需与原始 display 值一致，否则可能破坏样式）
• 更稳妥的做法是保存原始值：let originDisplay = el.style.display || getComputedStyle(el).display;，再切换时还原

用 visibility 实现“透明但占位”

visibility: hidden 会让元素不可见，但保留其在页面中的空间和布局位置，适合需要保持页面结构稳定的场景（比如动画过渡、悬停提示）。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 隐藏：

  el.style.visibility = "hidden";</li>
    <li>显示：<code>el.style.visibility = "visible";</li>
    <li>注意：<code>visibility

  不影响子元素继承（子元素可单独设 visible），而 display: none 会彻底隐藏整个子树

用 hidden 属性（语义化推荐）

HTML5 新增的布尔属性 hidden，原生支持，语义清晰，且默认 CSS 规则就是 [hidden] { display: none; }。

立即学习“Java免费学习笔记（深入）”；

• 隐藏：el.hidden = true; 或 el.setAttribute("hidden", "");
• 显示：el.hidden = false; 或 el.removeAttribute("hidden");
• 优势：无需关心 display 类型，不影响 CSS 样式优先级，便于无障碍访问（屏幕阅读器会忽略 hidden 元素）

结合事件做动态切换（实用示例）

常见需求如“点击按钮显示/隐藏面板”，可用一个开关变量或检查当前状态来翻转：

• button.addEventListener("click", () => { el.hidden = !el.hidden; });
• 或用 display：el.style.display = el.style.display === "none" ? "block" : "none";
• 若用 visibility：el.style.visibility = el.style.visibility === "hidden" ? "visible" : "hidden";