CSS与JS显示隐藏功能仅第二次点击生效，如何修复？

问题根源 #

初始状态下，元素的隐藏是靠CSS类.myhide设置的display: none，但element.style.display只能读取元素内联样式（也就是写在style属性里的样式），所以第一次点击时，x.style.display是空字符串，不满足=== "none"的判断，代码反而会给元素加上内联的display: none；第二次点击时，x.style.display才会等于"none"，这时才会切换成显示状态。

修复方法 #

方法1：切换CSS类（推荐）

这种方式更符合样式与逻辑分离的原则，维护起来更方便：

function UnhideFunction() {
  var x = document.getElementById("MyShow");
  x.classList.toggle("myhide");
}

CSS和HTML保持原样即可，classList.toggle()会自动给元素添加或移除myhide类，实现显示/隐藏的切换。

方法2：读取计算后的实际样式

如果非要直接操作display属性，可以用getComputedStyle获取元素当前生效的样式：

function UnhideFunction() {
  var x = document.getElementById("MyShow");
  var actualDisplay = window.getComputedStyle(x).display;
  if (actualDisplay === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

方法3：改用内联初始样式

如果想保留原有的判断逻辑，可以把初始隐藏样式改成内联方式：
修改后的HTML：

<button onclick="UnhideFunction()">SHOW ME</button>
<div id="MyShow" style="display: none">
  SOME TEXT
</div>

同时可以删掉CSS里的.myhide类。

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