如何通过 CSS 初始化隐藏元素并用 JavaScript 切换显示状态

✅ 正确做法分两步：

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

1. 用 CSS 显式初始化隐藏状态（推荐放在

   

   百宝箱

   百宝箱是支付宝推出的一站式AI原生应用开发平台，无需任何代码基础，只需三步即可完成AI应用的创建与发布。

   下载

   #more {
     display: none;
   }

   这确保元素加载即隐藏，且 getComputedStyle(x).display 也能稳定返回 "none"（注意：x.style.display 仍为空，但 getComputedStyle 可读取最终计算值）。

2. 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])）：

  <div class="black" id="more" hidden>

  function myFunction() {
    const x = document.getElementById('more');
    x.hidden = !x.hidden;
  }

总结：element.style.display 仅读写内联样式；要控制初始状态，请用 CSS；要可靠检测当前显示状态，请用 getComputedStyle(element).display；而最佳实践是结合 CSS 类或 hidden 属性，让结构、样式、行为各司其职。