如何将 DIV 默认设置为 style.display = "none"？

Question

我正在尝试制作一个按钮，当它被点击时会显示额外的文本，但是，我只能制作它

a) 默认显示文本或
b) 默认情况下隐藏文本但按钮不起作用。

这是按钮的 JS 代码：

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV">
 Hello World
</div>
<button type="button" class="btn btn-primary" click="showInfo()">
Show Info
</button>

有什么方法可以将默认 style.display 设置为 none 吗？

Answer 1

您的 JS 代码似乎没有问题。

相反

请更正您的 HTML，它是 'onclick' 而不仅仅是 'click'

<button onclick="showInfo()">

Answer 2

您的管理员是 click。它需要是 onclick。此外，我建议将 class 和 display:none 添加到您的 div，或者简单地内联它，如下所示：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV" style="display: none">
 Hello World
</div>
<button onclick="showInfo()">
Show Info
</button>

那么你的 JS 可以是这样的：

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

演示

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div id="myDIV" style="display: none">
     Hello World
    </div>
    <button onclick="showInfo()">
    Show Info
    </button>

Answer 3

您应该使用 CSS 为任何元素设置默认样式 – 通过链接到外部 CSS 文件或在您的 <style> 开始和结束标签之间HTML 文件。

像这样

#myDIV {
  display: none;
}

如何将 DIV 默认设置为 style.display = "none"？

How do I make a DIV set to style.display = "none" by default?

html

javascript

css

hidden

button