为什么#test在警报出现之前没有显示该元素?
#test
jQuery css()方法不应该是同步的吗?
css()
#test { display: none; } <span id="test">Element</span> $("#test").css("display", "inline"); alert("Showed element!");
更新:
我的行为在Windows 10的Chrome版本52.0.2743.116 m上表现出来。
它会同步更改样式,并且您会注意到,如果您在下一行读回该值并将其显示出来。
$("#test").css("display", "inline"); alert("Showed element!" + $("#test").css("display"));
但是样式对象的更改会触发重新渲染请求消息到页面渲染器,并且在浏览器空闲之后(即此脚本例程结束之后)立即处理该消息。
不过,这取决于浏览器。在Edge中可以正常工作,并且元素可以立即显示,但在Chrome和Vivaldi中则不能。
查看浏览器如何处理此问题的另一项测试:如果调整浏览器窗口的大小,JSFiddle将进行缩放(每个区域保持相同的相对大小)。如果在警报打开的情况下调整Vivaldi浏览器的大小,则不会这样做。实际上,如果您将其缩小,然后显示警报,然后将其放大,您只会在新空间中看到一个灰色区域,直到关闭消息框。在Edge中,即使整个浏览器窗口显示为灰色,小提琴也会在后台调整大小,因此这不仅是处理时间的问题,而且当警报打开时,Chrome会完全冻结页面。