如何用JavaScript修改HTML元素可见性？代码为何失效？

你的代码有两个核心问题，导致元素可见性切换功能失效：

1. 脚本执行时机过早 #

你把<script>放在<header>里，此时页面的<button>和<div>还没被浏览器渲染完成，document.getElementById会返回null，后续绑定点击事件的代码直接报错，根本没执行。

修复方法：把脚本移到<body>的最后面，确保DOM元素都加载完成后再执行JS：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
  <button id="toggle">Hi</button>
  <div id="block"></div>
  <!-- 把脚本移到body末尾 -->
  <script src="app.js"></script>
</body>
</html>

（另外注意，HTML里的头部标签规范写法是<head>而非<header>，浏览器虽会容错，但建议修正）

2. 可见性判断逻辑错误 #

你通过targetDiv.style.display判断元素状态，但这个属性仅能获取元素内联样式中的display值。而你的#block的display: none是写在CSS样式表中的，不是内联样式，所以初始时targetDiv.style.display是空字符串，不等于"none"，第一次点击会执行targetDiv.style.display = "none"——相当于给元素加了内联的display:none，但元素本来就是隐藏的，自然看不到变化。

修复方法：有两种常用解决方案：

方法一：用计算样式修正判断逻辑 #

修改app.js：

const targetDiv = document.getElementById("block");
const btn = document.getElementById("toggle");

btn.onclick = function() {
  // 获取元素实际应用的计算样式
  const computedDisplay = window.getComputedStyle(targetDiv).display;
  if (computedDisplay !== "none") {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};

方法二：用CSS类切换（更推荐，逻辑更清晰） #

修改style.css，新增一个控制隐藏的类：

#block {
  position: fixed;
  height: 20%;
  width: 50%;
  background-color: #00ff55;
  /* 默认显示，用类控制隐藏 */
  display: block;
}

#block.hidden {
  display: none;
}

然后修改app.js：

const targetDiv = document.getElementById("block");
const btn = document.getElementById("toggle");

btn.onclick = function() {
  // 自动切换hidden类的存在状态
  targetDiv.classList.toggle("hidden");
};

这种方式不需要手动判断状态，classList.toggle会自动添加/移除类，代码更简洁，也避免了样式来源的问题。

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