小编典典

为什么警报前未显示元素?

css

为什么#test在警报出现之前没有显示该元素?

jQuery css()方法不应该是同步的吗?

#test {
  display: none;
}



<span id="test">Element</span>



$("#test").css("display", "inline");
alert("Showed element!");

更新:

我的行为在Windows 10的Chrome版本52.0.2743.116 m上表现出来。


阅读 281

收藏
2020-05-16

共1个答案

小编典典

它会同步更改样式,并且您会注意到,如果您在下一行读回该值并将其显示出来。

$("#test").css("display", "inline");
alert("Showed element!" + $("#test").css("display"));

但是样式对象的更改会触发重新渲染请求消息到页面渲染器,并且在浏览器空闲之后(即此脚本例程结束之后)立即处理该消息。

不过,这取决于浏览器。在Edge中可以正常工作,并且元素可以立即显示,但在Chrome和Vivaldi中则不能。

查看浏览器如何处理此问题的另一项测试:如果调整浏览器窗口的大小,JSFiddle将进行缩放(每个区域保持相同的相对大小)。如果在警报打开的情况下调整Vivaldi浏览器的大小,则不会这样做。实际上,如果您将其缩小,然后显示警报,然后将其放大,您只会在新空间中看到一个灰色区域,直到关闭消息框。在Edge中,即使整个浏览器窗口显示为灰色,小提琴也会在后台调整大小,因此这不仅是处理时间的问题,而且当警报打开时,Chrome会完全冻结页面。

2020-05-16