用 style.display 控制显隐最常用也最可靠：设为"none"彻底隐藏且不占位，合法显示值包括"block"等；避免误用"false"或"0"，初始隐藏应靠css定义，推荐用classlist.toggle配合.hidden类实现切换。
用 style.display 控制显隐最常用也最可靠
绝大多数场景下，直接操作 style.display 是首选：它让元素彻底退出文档流，不占位、不影响布局，且兼容所有现代浏览器。
常见错误是写成 element.style.display = "false" 或 "0" —— 这些值无效，只有 "none" 才隐藏，"block"、"inline"、"flex" 等才是合法显示值。
- 初始隐藏必须靠 CSS 或 JS 显式设置；仅写
style.display = "none"在 JS 里执行一次不够，页面加载时元素仍会默认显示 - 如果目标元素原本是
<table> 或 <code><tr>，用 <code>"block"可能破坏表格结构，应改用"table"或"table-row" - 切换前建议先检查元素是否存在：
if (el && el.style)，避免Cannot read property 'style' of null -
visibility不影响事件冒泡，点击“看不见”的区域仍可能触发事件 - 和
display: none混用会导致行为不可预测——比如先设visibility: hidden，再设display: none，之后只恢复display，元素仍不可见 - 若需渐变隐藏，
visibility无法配合transition动画，而opacity+pointer-events更合适
为什么不用 style.visibility？
style.visibility = "hidden" 会让元素“隐形但仍在”，位置被保留，周围元素不会重排。这在动画过渡、表单对齐或需要维持 DOM 占位的极少数场景有用，但日常交互中容易引发布局错觉。
典型坑点：用户以为字段已消失，实际它仍响应 focus()、接收键盘事件，甚至可能被屏幕阅读器读出（语义未隐藏）。
单按钮切换显隐：别手写 if-else 判断
用 classList.toggle() 配合 CSS 类更干净，也规避了读取当前 display 值的不确定性（比如元素继承了父级 display，或被其他样式覆盖）。
示例：
/* CSS */
.hidden { display: none; }
JS 中只需：
document.getElementById("toggleBtn").addEventListener("click", () => {
document.getElementById("target").classList.toggle("hidden");
});
- 不要依赖
el.style.display === "none"来判断状态——内联样式为空时，该判断恒为false - 如果必须用 JS 控制，推荐封装成函数：
function toggleDisplay(el) { el.style.display = el.style.display === "none" ? "" : "none"; }，但注意空字符串会回退到 CSS 计算值，不一定等于原始值 - 多个元素联动时，统一用 class 控制比逐个操作
style.display更易维护
初始状态不生效？问题大概率出在执行时机
页面刚加载完，JS 就执行 el.style.display = "none"，但若脚本放在 里，el 还没解析出来，操作就失败了。
最稳的做法是：CSS 里直接定义初始状态，JS 只负责响应交互。
- 给目标元素加 class，如
<div id="panel" class="js-hidden">，再在 CSS 写 <code>.js-hidden { display: none; } - 若必须用 JS 初始化，确保在
DOMContentLoaded或把脚本放底部 - 服务端渲染或框架环境下，初始隐藏逻辑应和数据状态绑定，而非靠 JS “补刀”
真正麻烦的不是怎么切，而是状态同步——比如 checkbox 控制 div 显隐，但刷新后 checkbox 恢复默认值，div 却没跟着重置。这种细节，得靠初始化逻辑兜底，而不是等用户点第一次才修正。
