通过JavaScript实现HTML元素可见性切换的问题排查

核心问题分析 #

你的代码存在三个关键错误：

1. 属性混用：判断逻辑依赖visibility属性，但修改的却是display属性，二者是独立的CSS可见性控制属性，不能交叉使用。
2. 条件逻辑错误：两个if语句会依次执行，无论当前状态如何，最后都会触发第二个if的代码，强制将元素设为隐藏。
3. 属性取值错误：display属性没有visible这个有效值，对应显示状态应使用block（或元素默认的display值）。

修复后的完整代码 #

HTML

<div id="inven">hi</div>
<div id="btn">-</div>

CSS

#inven {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 400px;
  background-color: #242424;
  border-radius: 20px;
  padding: 10px;
}

#btn {
  position: absolute;
  visibility: visible;
  top: 500px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: #cac4c4;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer; /* 添加上手型指针，提升交互体验 */
}

JavaScript

const inven = document.getElementById("inven");
const btn = document.querySelector("#btn");

// 初始设置可见性
inven.style.visibility = "visible";

btn.addEventListener("click", function () {
  console.log("click");
  console.log(inven.style.visibility);
  
  // 统一使用visibility属性完成状态切换
  if (inven.style.visibility === "hidden") {
    inven.style.visibility = "visible";
  } else {
    inven.style.visibility = "hidden";
  }
});

更推荐的优化方案：CSS类切换 #

如果需要更灵活的样式控制，建议通过添加/移除CSS类实现状态切换，避免直接操作元素内联样式：

新增CSS类

.hidden {
  visibility: hidden;
  /* 若需要完全移除元素空间，可替换为 display: none; */
}

修改后的JavaScript

const inven = document.getElementById("inven");
const btn = document.querySelector("#btn");

btn.addEventListener("click", function () {
  inven.classList.toggle("hidden");
});

这种方式更易于维护，也能避免属性混用的问题。

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