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

Question

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

我已经把它放在了.html的head标签中：

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

那么当在.js中调用一个函数时：

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

这种方法会导致页面加载时元素短暂闪烁吗？有没有更好的方法来做到这一点（几乎）很简单？

请注意，在我牢牢掌握 vanilla JavaScript 之前，我会尽量避免使用 jQuery。

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

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

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

#test {
  display:inline;
}

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

Answer 3

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

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