通过脚本在<head>中隐藏元素，然后使用函数显示

Hiding an element via a script in the <head>, then showing with a function?

本文关键字：然后 元素 显示 隐藏 函数 脚本 head      更新时间：2023-09-26

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

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

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

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

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

此方法是否会导致页面加载时元素短暂闪烁？有没有更好的方法可以做到这一点，它（几乎）一样简单？

请注意，在我牢

牢掌握了普通 JavaScript 之前，我试图避免使用 jQuery。

如果你想确保元素在开始时根本不出现，你应该通过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 中看到我正在谈论的问题。

最初使用 css 隐藏它：

#answerPanel { display: none; }

然后用JS按需显示：

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

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

<div id="answerswerPanel" style="display: none">
</div>
相关文章：