通过脚本隐藏元素，然后用函数显示？

Question

我正在隐藏一个元素，稍后会在用户按下按钮时显示。

我把它放在.html中的头标记中：

<script>document.getElementById("answerPanel").style.display = "none";</script>

然后在.js：

中调用函数

document.getElementById("answerPanel").style.display = "";

此方法是否会导致页面加载时元素的短暂闪烁？是否有更好的方法（几乎）这么简单？

请注意，我正在努力避免使用jQuery，直到我掌握了vanilla JavaScript。

Answer 1

最初使用css隐藏它：

#answerPanel { display: none; }

然后用JS显示它：

document.getElementById('answerPanel').style.display = 'block';

Answer 2

如果要确保元素在开始时根本不显示，则应通过HTML而不是JavaScript设置元素的样式。这样就可以隐藏元素，即使对JavaScript文件或CSS文件等其他资源的请求被延迟也是如此。

内联JavaScript可能是一个解决方案，在这种情况下你不会遇到问题，但如果你尝试将它用于一些更复杂的情况，你可能会面临布局垃圾的风险，这会延迟你的初始页面加载。我不推荐它。

HTML：

<div id="test" style="display:none"> </div>
<button onclick='show()'>Show!</button>

CSS（可选）：

#test {
  width:100px;
  height:100px;
  background-color:red;
}

JS：

function show() {  
  document.getElementById('test').style.display = '';
}

DEMO：http://jsbin.com/oYiDEJU/2/edit

编辑：此解决方案（内联样式）允许您轻松更改CSS的显示值：

#test {
  display:inline;
}

隐藏和显示该值将保留'inline'值，而不是使用'block'覆盖它。您可以在链接的JsBin中看到我正在讨论的问题。

Answer 3

如果你想避免“闪光”，最好是浏览器加载已隐藏的元素：

<div id="answerPanel" style="display: none">
</div>