本文详解为何直接使用 `style.display` 判断初始状态会失效，并提供正确方案：通过 css 设置 `display: none` 初始化隐藏，再用 javascript 安全切换显隐。
在 javaScript 中操作元素的可见性时，一个常见误区是：仅靠 element.style.display 读取值来判断元素当前是否隐藏，却忽略了该属性仅反映内联样式（inline style），无法获取 css 规则或浏览器默认样式。在你的代码中：
I was supercool guys.... bla bla bla bla
该
没有设置 style=”display: none”，因此 x.style.display 的初始值为空字符串 “”，而非 “none” 或 “block”。于是无论你写 if (x.style.display == “none”) 还是 if (x.style.display == “block”)，首次点击时条件均不成立，else 分支执行 x.style.display = “block” —— 表面看“没变化”，实则是从空值变为 “block”，但因元素原本就按 html 默认流式渲染（display: block），视觉上毫无区别，导致误以为“始终显示”。
✅ 正确做法分两步：
立即学习“Java免费学习笔记（深入）”；
-
用 CSS 显式初始化隐藏状态（推荐放在
#more { display: none; }这确保元素加载即隐藏，且 getComputedStyle(x).display 也能稳定返回 “none”（注意：x.style.display 仍为空，但 getComputedStyle 可读取最终计算值）。
-
javascript 切换逻辑建议更健壮（避免依赖可能为空的 style.display）：
function myFunction() { const x = document.getElementById('more'); // 推荐：使用 getComputedStyle 确保读取真实渲染状态 const computedDisplay = getComputedStyle(x).display; x.style.display = computedDisplay === 'none' ? 'block' : 'none'; }
? 更简洁现代的写法（无需判断，直接切换）：
function myFunction() { const x = document.getElementById('more'); x.style.display = x.style.display === 'none' ? 'block' : 'none'; }⚠️ 注意：此写法前提是已通过 CSS 设置了初始 display: none，否则 x.style.display 仍为空，首次点击会失效。
? 额外建议：
- 使用 classlist.toggle() 配合 CSS 类实现更优雅的控制（解耦样式与逻辑）：
#more { display: none; } #more.show { display: block; }function myFunction() { document.getElementById('more').classList.toggle('show'); } - 若项目支持，优先使用 hidden 全局属性（语义更清晰，且支持 CSS :not([hidden])）：
function myFunction() { const x = document.getElementById('more'); x.hidden = !x.hidden; }总结：element.style.display 仅读写内联样式；要控制初始状态，请用 CSS；要可靠检测当前显示状态，请用 getComputedStyle(element).display；而最佳实践是结合 CSS 类或 hidden 属性，让结构、样式、行为各司其职。