显示 none 后重新显示 div

Question

我希望做一些简单的事情，谷歌搜索没有产生我能理解的结果（我仍然是菜鸟。）我希望将显示设置为 none div，但稍后让 div 回来。我没有这样做。请参阅随附的代码段，我已尝试 "Initial" 和 "Reset" 但无济于事。有什么建议吗？

function hideBtnClick(){
  innerBlock.style.display = "none";
}


function showBtnClick(){
  innerBlock.style.display = "reset";
}

#outerBlock{
  width: 100%;
  height: 100px;
  background-color: #FFCC33;
}

#innerBlock{
  width: 50%;
  height: 50px;
  background-color: #FF0000;
  margin: 0 auto;
}

<div id="outerBlock">
   <div id="innerBlock"></div>
</div>

<button type="button" onclick="hideBtnClick()">Hide</button>

<button type="button" onclick="showBtnClick()">Show</button>

Answer 1

将此用于 div：

innerBlock.style.display = "block";

或者这个跨度：

innerBlock.style.display = "inline";

有关 CSS 显示选项的更多信息，请访问：

http://www.w3schools.com/cssref/pr_class_display.asp

使用标准 JavaScript（ES 脚本），您需要使用：

document.getElementById("innerBlock").style.display = "block";

Answer 2

您必须将 reset 更改为 block

innerBlock.style.display = "block";

Answer 3

用它来展示 div :

document.getElementById("innerBlock").style.display = "block";

检查下面的片段。它的工作正常

function hideBtnClick(){
  document.getElementById("innerBlock").style.display = "none";
}


function showBtnClick(){
  document.getElementById("innerBlock").style.display = "block";
}

#outerBlock{
  width: 100%;
  height: 100px;
  background-color: #FFCC33;
}

#innerBlock{
  width: 50%;
  height: 50px;
  background-color: #FF0000;
  margin: 0 auto;
}

<div id="outerBlock">
   <div id="innerBlock"></div>
</div>

<button type="button" onclick="hideBtnClick()">Hide</button>

<button type="button" onclick="showBtnClick()">Show</button>

Answer 4

在 显示后：none; 我们可以使用标准 javascript

重新显示 div 元素

document.getElementById('div_ID').style.display = "block";

显示 none 后重新显示 div

Redisplay div after display none

css

display