为什么内联CSS与内部CSS表现不同？如何统一二者行为？

问题原因 #

你的代码里，sibling.style.display只能读取元素的内联样式，而内部CSS（.content类）设置的display: none不会被这个属性获取到。第一次点击Foo时，sibling.style.display是空字符串，不等于"none"，所以代码会执行else分支把它设为display: none；第二次点击时，内联样式已经被设为"none"，才会切换成block，这就是需要点击两次的原因。

解决方案 #

有两种可靠的实现方式，都能让内部/外部CSS的元素点击一次就切换显示状态：

方案1：获取计算后的样式

修改showHide函数，用getComputedStyle获取元素实际生效的样式，而不是只看内联样式：

function showHide(element) {
  const sibling = element.nextElementSibling;
  const computedDisplay = window.getComputedStyle(sibling).display;
  if (computedDisplay === "none") {
    sibling.style.display = "block";
  } else {
    sibling.style.display = "none";
  }
}

对应的CSS保持不变：

.content {
  display: none;
}

方案2：类切换（推荐）

这种方式更符合"行为与样式分离"的前端最佳实践，不用直接操作元素的style属性，而是通过切换类来控制显示：

1. 修改CSS，定义一个通用的隐藏类：

.hidden {
  display: none;
}

2. 给需要隐藏的元素加上这个类：

<h1 onclick="showHide(this)">Foo</h1>
<div class="hidden">
  Foo Content
</div>

3. 简化JS函数，直接切换类：

function showHide(element) {
  const sibling = element.nextElementSibling;
  sibling.classList.toggle('hidden');
}

这种方式不管是内部CSS还是外部CSS，都能正常工作，而且代码更简洁易维护。

需要学习的相关概念 #

• DOM样式获取的区别：element.style仅对应内联样式，getComputedStyle获取的是元素最终生效的计算样式，了解这两者的差异是解决这类问题的核心。
• CSS类操作：通过classList的add/remove/toggle方法操作元素类名，是实现样式动态切换的标准方式，能让JS和CSS职责分离。
• CSS优先级：理解内联样式、内部CSS、外部CSS的优先级关系，以及类选择器的作用范围，有助于更好地控制元素样式。

内容的提问来源于stack exchange，提问作者jjcb