Question

我有一个简单的功能，当我点击一个按钮来显示该按钮的文本时，一切正常，但是第一次点击它不起作用，第二次点击后它工作正常，有人能告诉我我的错误是什么吗？我有隐藏在 CSS 显示中的元素；没有，这是我的逻辑

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

    #myDIV {
        display: none;
    }

<button type="button" class="btn btn-primary btn-lg btn-block" onclick="myFunction()">

  <div id="myDIV">
    This is my DIV element.
  </div>

Answer 1

问题可能是您没有关闭按钮标签。所以它没有找到 myFunction()。您还需要获取显示样式的计算值而不是元素值，因为 css 文件不会直接影响元素样式。（例如 vs style=""）

<body>
    <script>
      function myFunction() {
        var x = document.getElementById("myDIV");
        if (getComputedStyle(x).display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      }
    </script>
    <button
      type="button"
      class="btn btn-primary btn-lg btn-block"
      onclick="myFunction()"
    >
      test
    </button>

    <div id="myDIV">
      This is my DIV element.
    </div>
  </body>

单击 JS 时隐藏/显示元素无法正常工作

1 个答案: