Question

这是一个链接：wbrapist.github.io/slider/index.html

第一次加载页面时，它很好（getComputedStyle返回有效值）。但只是尝试按Ctrl + F5重新加载页面，等待几秒钟，然后只需按F5重新加载，你就会看到滑块导航不在中心位置。在这一刻你可以打开浏览器的控制台，看到重载后的getComputedStyle（F5）只返回'auto'值。为什么会这样？为什么在强制重新加载（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... */
});

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

1 个答案: