如何在 JavaScript 中显示/隐藏元素？ [复制]答案

【问题标题】：How to show/hide an element in JavaScript? [duplicate]如何在 JavaScript 中显示/隐藏元素？ [复制]
【发布时间】：2021-03-28 09:29:45
【问题描述】：

我正在创建一个 div 元素来测试在 JS 中为我的日历程序隐藏和显示一个元素。我有一个使用x.style.display 在页面中呈现或隐藏div“信息”的函数。但是当我测试它时它不起作用；当我单击按钮时，“信息” div 会正常显示在屏幕上。

function show() {
  var divide = document.getElementById("info").innerHTML;
  if (divide.style.display === "hidden") {
    divide.style.display = "block";
  } else {
    divide.style.display = "hidden";
  }
}

<button onclick="show()">Show/Hide</button>
<div class="info">Testy</div>

【问题讨论】：

把<script type = "text/javascript" src = "div.js"></script>放在body的末尾
您尝试过什么调试问题？这和 PHP 有什么关系？
document.getElementById("info") 这个ID是什么元素？
删除 .innerHtml 因为您将除法设置为 HTML（文本字符串）而不是 DOM 节点。 DOM 节点有样式属性，字符串没有。
您有var divide = document.getElementById("info").innerHTML;，但您的div 使用class。当前：var divide = document.getElementById("info").innerHTML;应该是什么：var divide = document.getElementsByClassName("info")[0].innerHTML;你的<div>：<div class="info">Testy</div>

标签： javascript html css

【解决方案1】：

你已经使用了 innerHtml 用于分配字符串。所以删除它并隐藏你可以使用display:none not hidden。

function show() {
  var divide = document.getElementById("info");
  if (divide.style.display === "none") {
    divide.style.display = "block";
  } else {
    divide.style.display = "none";
  }
}

<div id="info">Testy</div>
<button onclick="show()">Show/Hide</button>

【讨论】：

请解释你的答案，不要简单地说“通过这个答案”
当原始元素有display:none时，需要点击两次才能显示