通过脚本隐藏元素 <head> ，然后显示一个功能？

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 = '';
}

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

#test {
  display:inline;
}

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

Answer 3

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

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