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

Question

我隐藏了一个元素，稍后当用户按下按钮时显示。

我已将其放入 .html 的 head 标记中:

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

然后当在 .js 中调用函数时:

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

此方法是否会导致页面加载时元素短暂闪烁？有没有更好的方法来做到这一点(几乎)如此简单？

请注意，在我完全掌握普通 JavaScript 之前，我会尽量避免使用 jQuery。

Answer 1

如果您想确保元素在开始时根本不会出现，您应该通过 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 = '';
}

演示:http://jsbin.com/oYiDEJU/2/edit

编辑:此解决方案(内联样式)允许您轻松更改 CSS 的显示值:

#test {
  display:inline;
}

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