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

【问题标题】：How do I make a DIV set to style.display = "none" by default?如何将 DIV 默认设置为 style.display = "none"？
【发布时间】：2019-10-07 18:40:23
【问题描述】：

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

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？

【问题讨论】：

CSS #myDiv { display: none; } 将“默认”设置为隐藏元素。或者只是把它放在像<div style="display:none;"></div>这样的内联元素上
@daddygames 谢谢！这对我有用！
如果只是关于js：window.onload=showInfo();

标签： javascript html css button hidden

【解决方案1】：

您的处理程序是click。它必须是onclick。另外，我建议将带有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>

【讨论】：

如果只是关于 js：window.onload=showInfo(); 也可以完成这项工作；）

【解决方案2】：

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

像这样

#myDIV {
  display: none;
}

【讨论】：

【解决方案3】：

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

相反

请纠正您的 HTML，它是“点击”而不是“点击”

<button onclick="showInfo()">

【讨论】：