为什么页面重新加载后getComputedStyle返回“ auto”作为滑块的宽度？

Question

这里的链接： wbrapist.github.io/slider/index.html

第一次加载页面时就可以了（getComputedStyle返回有效值）。 但是，只需尝试通过Ctrl + F5重新加载页面，等待几秒钟，然后通过F5重新加载，您将看到滑块导航不在中心位置。 此时，您可以打开浏览器的控制台，然后看到重新加载（F5）后的getComputedStyle仅返回“自动”值。 为什么会这样呢？ 为什么在强制重新加载（ctrl + f5）后还可以，否则就不行了？

可以注意到：在这种情况下，我的滑块的开关幻灯片动画也无法正常工作。 （也通过getComputedStyle（）获取值）

这里是一些代码：

 var sliderWidth = getComputedStyle(document.getElementsByClassName('slider')[0]).width; function setSliderNavPosition() { var nav = document.querySelector('.slider .navigation'); var navWidth = parseFloat(getComputedStyle(nav).width); var slidersWidth = parseFloat(sliderWidth); nav.style.left = ( (slidersWidth / 2) - (navWidth / 2) ) + 'px'; } 

至少在Chrome和Mozilla中存在此问题。

Answer 1

在文档未完全加载时使用它是一个坏主意。 根据加载时间，您的值将有所不同。 这就是为什么您会得到不同的行为。

要解决此问题，只需通过包装如下代码来等待文档加载：

window.addEventListener('load', function(){
    /* ...YOUR CODE GOES HERE... */
});