在显示none后重新显示div

Question

我希望做一些简单的事情，谷歌还没有产生我能理解的结果(我仍然是一个菜鸟)。我希望将div的display设为none，然后让那个div回来。我做不到。见附件片段，我试过"初始化"one_answers"重置"，但无济于事。有什么建议吗?

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";

对于span:

innerBlock.style.display = "inline";

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

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

使用标准JavaScript (ES Script)，您需要使用:

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

在display:none;之后，我们可以使用标准的javascript重新显示div元素

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