初始状态点击两次Read More按钮才显示DIV的问题修复咨询

这个问题的核心原因是：你通过CSS样式表设置了#myDIV { display: none; }，但初始时元素的内联style.display属性是空字符串，并不是预期的"none"。

第一次点击按钮时，x.style.display === "none"这个判断不成立，代码会执行else分支——把display设为none（其实元素本来就是隐藏状态，等于做了无用功）；第二次点击时，x.style.display已经被设置为"none"了，才会触发显示的逻辑。

方案1：修改判断条件，兼容空字符串状态 #

最简单的修改方式是把判断条件改成同时检查空字符串和"none"，这样第一次点击就能命中显示逻辑：

function myFunction() {
  var x = document.getElementById("myDIV");
  var btnText = document.getElementById("myBtn");
  // 兼容初始空字符串的情况
  if (x.style.display === "none" || x.style.display === "") {
    x.style.display = "block";
    btnText.innerHTML = "Read less";
  } else {
    x.style.display = "none";
    btnText.innerHTML = "Read More";
  }
}

方案2：使用getComputedStyle获取实际生效的样式 #

这种方式更可靠，能拿到元素最终应用的CSS样式（不管是内联、内部还是外部样式表设置的）：

function myFunction() {
  var x = document.getElementById("myDIV");
  var btnText = document.getElementById("myBtn");
  // 获取元素实际生效的样式
  var computedDisplay = window.getComputedStyle(x).display;
  if (computedDisplay === "none") {
    x.style.display = "block";
    btnText.innerHTML = "Read less";
  } else {
    x.style.display = "none";
    btnText.innerHTML = "Read More";
  }
}

方案3：用CSS类切换（推荐，符合样式与逻辑分离原则） #

把显示隐藏的逻辑交给CSS类控制，JS只负责切换类，这样代码更清晰，也避免直接操作内联样式的问题：

CSS部分： #

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
/* 定义隐藏类 */
.hidden {
  display: none;
}

HTML部分： #

给myDIV加上初始的hidden类：

<div id="myDIV" class="hidden">
  This is my DIV element.
</div>
<button onclick="myFunction()" id="myBtn">Read More</button>

JS部分： #

function myFunction() {
  var x = document.getElementById("myDIV");
  var btnText = document.getElementById("myBtn");
  // 切换hidden类
  x.classList.toggle("hidden");
  // 根据类的存在状态修改按钮文本
  btnText.innerHTML = x.classList.contains("hidden") ? "Read More" : "Read less";
}

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