Question

我的代码非常简单。但我不知道这个问题。问题是页面加载/刷新后，我需要单击两次超链接以显示div。但是一旦显示了div，我只需要单击一次即可显示/取消显示。请帮助！为什么第一次需要单击两次？谢谢！

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

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
  display: none;
 }

<a href="javascript:myFunction()" style="color="#0000FF"">click to display:</a> 
<div id="myDIV">
  display text area
</div>

我尝试了不同的方法，一种是 <a href="" onClick="myFunction();return false;">click here</a>

Answer 1

x.style.display属性在代码开头没有值。要解决此问题，只需将这一行放在函数定义之前，即可为属性设置一个预设值：

document.getElementById("myDIV").style.display = "none";

那应该为您解决

Answer 2

CSS样式规则未暴露给JavaScript。您需要使用getComputedStyle来获取JavaScript中CSS呈现的样式值。

将代码更改为此：

if (window.getComputedStyle(x).display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}

签出以下工作片段：

<html>
<head>
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
      display: none;
    }
  </style>
</head>

<body><br>
  <font color="#0000FF"><a href="javascript:myFunction()">click to display:</a>
  </font>
  <div id="myDIV">
    display text area
  </div>
  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      
      if (window.getComputedStyle(x).display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>
</body>

</html>

加载页面后需要单击两次以显示div

2 个答案: