JavaScript - 有没有办法在应用假设的 CSS 样式后获取元素的 offsetTop？

Question

有没有一种方法可以在应用某些 CSS 样式后获取元素的 offsetTop 的值而不实际应用该 CSS？

例如，如果一个元素的 CSS 当前是:

position: absolute;
top: 45px;

有没有办法知道该元素的 offsetTop 的用途:

顶部:自动；

没有实际应用 top: auto;？

如果我们真的应用它，即使是很短的时间，它也会导致闪烁。

Answer 1

有一个简单的技巧:

渲染元素但保持其不可见(使用 opacity: 0 或 visibility: hidden 或将其定位在视口(viewport)之外)并使用 JavaScript 计算其尺寸。这样您就可以避免 FOUC 问题。