如何修改JS代码实现页面加载时默认隐藏图片的点击切换功能？

要实现页面加载/刷新时图片默认隐藏，点击按钮/文字后切换显示/隐藏状态，可以通过以下两种可靠方式解决：

方法一：通过CSS设置初始隐藏（推荐） #

直接在目标元素（对应你代码里的myDIV）的CSS中设置默认隐藏，页面加载时元素就会处于隐藏状态，同时保留你原有的JS逻辑即可：

#myDIV {
    display: none;
}

你的JS代码无需修改，保持原有逻辑：

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

你之前交换none和block无效的原因是：元素初始未通过JS设置style.display时，x.style.display会是空字符串而非block，交换后第一次判断不成立，会直接执行显示逻辑，导致初始状态不符合预期。用CSS设置初始状态更可靠，也符合样式与逻辑分离的开发原则。

方法二：修改JS逻辑并初始化状态 #

如果不想依赖CSS，也可以通过JS在页面加载时初始化隐藏状态，同时调整判断逻辑：

方式1：页面加载时初始化状态 #

// 页面加载完成后设置初始隐藏
window.onload = function() {
  var x = document.getElementById("myDIV");
  x.style.display = "none";
};

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

方式2：用计算样式判断实际状态 #

通过getComputedStyle获取元素实际生效的显示状态，判断更准确，无需额外初始化：

function myFunction() {
  var x = document.getElementById("myDIV");
  var currentDisplay = window.getComputedStyle(x).display;
  x.style.display = currentDisplay === "none" ? "block" : "none";
}

使用这种方式时，需要在HTML元素上直接添加style="display:none"来设置初始隐藏：

<div id="myDIV" style="display:none">你的图片内容</div>

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