如何在 Javascript 中隐藏元素

Question

我希望文本隐藏在开头，单击按钮后显示。如果有人能在我的代码中发现错误，我将非常感激。

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

<!DOCTYPE html>
<html>

<body>

  <button onclick="F1()"> <b>Step 1</b> </button>
  <div id="step1DIV">
    <p> text </p>
  </div>

</body>

</html>

Answer 1

您需要给它一个初始样式，将其隐藏在 HTML。

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

  <button onclick="F1()"> <b>Step 1</b> </button>
  <div id="step1DIV" style="display: none;">
    <p> text </p>
  </div>

但是内联样式设计不佳，最好使用 class 和 CSS。

function F1()
{
  var x = document.getElementById("step1DIV");
  x.classList.toggle("hidden");
}

.hidden {
  display: none;
}

<button onclick="F1()"> <b>Step 1</b> </button>
  <div id="step1DIV" class="hidden">
    <p> text </p>
  </div>

Answer 2

尝试将步骤 1 DIV 的 display 初始设置为 none。使用内联样式或 CSS。

您也可以尝试运行在页面加载时使用您的函数。

Answer 3

我只是将其定义为 'none' 开始：

<div id="step1DIV" style="display: none">

如何在 Javascript 中隐藏元素

How to hide Elements in Javascript

javascript

html

hide

show