为何元素可见性切换需点击两次才生效？

你遇到的问题核心在于：element.style属性只能读取元素的内联样式（即直接写在HTML元素style属性里的样式），无法获取外部CSS样式表或<style>标签中定义的样式。

你在CSS里给#div设置了visibility: hidden，但这不属于内联样式，所以第一次触发mouseup事件时，div.style.visibility是空字符串，代码会走进else分支，给元素添加内联的visibility: hidden。到第二次点击时，div.style.visibility就能读取到这个内联值，切换逻辑也就正常工作了。

方案1：使用getComputedStyle读取最终生效样式 #

window.getComputedStyle()可以获取元素最终应用的所有样式（包括样式表、内联等来源），修改JS代码如下：

let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById("div");
  const currentVisibility = window.getComputedStyle(div).visibility;
  if (currentVisibility === "hidden") {
    div.style.visibility = "visible";
  } else {
    div.style.visibility = "hidden";
  }
}

方案2：用CSS类切换（更推荐） #

将样式逻辑完全放在CSS中，通过添加/移除类来控制可见性，这种方式更符合样式与逻辑分离的原则：

修改CSS：

#div {
  visibility: hidden;
}
#div.show {
  visibility: visible;
}

修改JS：

let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById("div");
  div.classList.toggle("show");
}

方案3：初始设置内联样式（不推荐） #

直接给div添加内联样式，让div.style.visibility初始就能读取到值，但这种方式会把样式和HTML结构混写，不利于维护：

<div id="div" style="visibility: hidden;">
  <h1> Hello, World! </h1>
</div>

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