如何在页面加载时隐藏指定元素并正常使用点击显示/隐藏切换功能

安全阿岳

2026-9-27

问题根因

你遇到的加载时图片默认显示的问题，通常是两个原因共同导致的：

CSS规则的优先级被覆盖/未生效：你在样式表中给#img01设置的display: none可能被更高优先级的样式（比如带!important的全局img样式、行内样式）覆盖，或者对应的CSS文件没有正确引入页面，导致默认隐藏的规则没生效。
JS判断逻辑存在缺陷：element.style.display只能读取到元素的行内style属性里设置的display值，拿不到样式表中定义的样式。页面首次加载时x.style.display是空字符串，不等于none，首次点击会走else分支把display设为none，逻辑和预期相反。

修复方案

优先用下面的方案1，改动最小也最稳定：

方案1：给图片加行内默认样式

直接在img标签上添加行内display: none，既保证页面加载时默认隐藏，也能让JS的判断逻辑正常生效：

<div onclick="active01()" id="line01"> Exhibition_Design_The_Telephone_book_001....................2009-001</div><br>
<img id="img01" src="images/01 Exhibition design.jpg" alt="Exhibition_Design_The_Telephone_book_001....................2009-001" style="display: none;"><br>

改完后原有JS、CSS代码不需要动就能符合预期。

方案2：修改JS判断逻辑，读取实际渲染样式

如果你不想写行内样式，就把JS的判断逻辑改成读取元素计算后的最终渲染样式，兼容样式表中设置的隐藏规则：

function active01() {
  var x = document.getElementById("img01");
  // 获取元素实际生效的样式
  var currentDisplay = window.getComputedStyle(x).display;
  if (currentDisplay === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}