显示具有display属性但默认情况下为隐藏的div

Question

我希望默认情况下隐藏div，并且以下JavaScript代码有问题。

该代码在某种程度上可以正常工作，但是它最初显示了div，然后将其隐藏，而不是先隐藏然后单击按钮时将其显示。

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

<button id="sendButton" onclick="myFunction()">Send</button>
<p id="answers">Answers</p>

Answer 1

您可以添加用于隐藏DIV

的初始值

style="display:none"

查看演示

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

<button id="sendButton" onclick="myFunction()">Send</button>

<!-- add the initial value for hiding the div -->
<div id="answers" style="display:none">answers here</div>

Answer 2

您可以使用简单的三元运算符-同样，设置style.display = ""将显示元素：

function myFunction() {
    var x = document.getElementById("answers");
    x.style.display = x.style.display == "none" ? "" : "none";
}

如果您希望默认情况下将其隐藏，则还需要向style="display: none;"元素中添加<div>：

function myFunction() {
  var x = document.getElementById("answers");
  x.style.display = x.style.display == "none" ? "" : "none";
}

<button id="sendButton" onclick="myFunction()">Send</button>

<div id="answers" style="display: none;">This is some text.</div>

Answer 3

您当前的脚本运行正常。只需将CSS属性display: none添加到您的#answers元素即可在默认情况下将其初始隐藏：

<p id="answers" style="display:none">
  Answers
</p>

此外，您应该避免使用内联on- *处理程序（onclick，oninput，更改等），而应使用事件侦听器。

---

检查并运行以下代码段，以获取具有上述CSS代码的实际示例：

内联CSS：

const btn = document.getElementById("sendButton");

btn.addEventListener("click", function() {
  var x=document.getElementById("answers");
  if (x.style.display==="none") {
    x.style.display="block";
  }
  else {
    x.style.display="none";
  }
});

<button id="sendButton">Send</button>
<p id="answers" style="display:none">Answers</p>

外部CSS：

/* JavaScript */

const btn = document.getElementById("sendButton");

btn.addEventListener("click", function() {
  var x=document.getElementById("answers");
  if (window.getComputedStyle(x).display === "none") {
    x.style.display="block";
  }
  else {
    x.style.display="none";
  }
});

/* CSS */

#answers {
  display: none;
}

<!-- HTML -->

<button id="sendButton">Send</button>
<p id="answers">Answers</p>

---

NB 。您可以使用三元运算符来缩短上述代码，如@JackBashford的答案所示。

Answer 4

您也可以通过使用hidden（HTML5属性）来添加用于隐藏div的初始值。

<div id="answers" hidden>answers here</div>