Javascript 在 alert() 之前和之后显示 样式

Question

我试图在我的网页上显示一个 div，显示一个警报，然后在警报后隐藏它。我不确定这是否是 Chrome 渲染问题，但我无法让这两个单独的样式单独显示。它们似乎在同时执行，并且有效地在屏幕上什么也不显示。我已经在网站上搜索了一段时间，但似乎找不到任何帮助。这是我在 javascript 文件中的位置:

var hide = document.getElementById("overlay").style.display = 'block';
alert("hello");
hide = document.getElementById("overlay").style.display = 'none';

“覆盖”永远不会显示为“ block ”...但是，如果您将显示注释为“无”，则会弹出警报，然后显示为“ block ”元素(这让我想到了我之前的Chrome 渲染问题的结论)。

感谢任何帮助。欢迎使用不同的方法来解决这个问题以达到相同的结果(特别是在 Chrome 中)。提前致谢。

Answer 1

这很棘手……但这是一个解决方案。

var hide = document.getElementById("overlay").style.display = 'block';

setTimeout(function(){
  alert("hello");
  hide = document.getElementById("overlay").style.display = 'none';
},10)

<span id="overlay" style="display:none;">this is what to show hide</span>