这里的链接: 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中存在此问题。

#1楼 票数:0 已采纳

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

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

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

  ask by Dmitry Fateev translate from so

未解决问题?本站智能推荐:

1回复

重新加载html页面后没有获取滑块图像

这是我的 html 页面的屏幕截图。 这个评论区是我的问题。
2回复

Javascript-window.getComputedStyle返回“auto”作为元素的顶部和左侧属性

在我的网页上,我有一些元素(div、子 div、按钮等),它们的位置是相对于它们所在的 div 生成的,并且彼此之间。 这导致在使用window.getComputedStyle 时, top和left属性不是数字值,而只是“auto”,而宽度和高度以 px 为单位。 我需要绝对值用于测量目的的问题
1回复

动画后,页面不会重新加载

我正在创建一个骑自行车的小家伙,它跑过屏幕,当鼠标碰到它时,它应该停下来看着你。 它的运行,转弯和停止都很好,但是当它停止时,他看着我们的形象不起作用。 此外,当我尝试重新加载页面时,它没有。 我认为有一个循环或阻止它重新加载的东西。 这是我的 html: 这是我的 css let speed
1回复

加载视频后,页面不会重新加载

这是以下情况。 我有一个网站,有一个图像,如果你点击图像,图像应该被一个自动启动的视频取代。 我的代码看起来像这样: HTML: JS: CSS: 这个工作到目前为止(当你点击图像时,视频将被加载,当加载完成后,图像将被视频替换,并自动启动)。 但是如果你现在要重新加载
5回复

页面重新加载后按钮更改

因此,我有一个要控制过程的按钮。 该过程可以运行/暂停/停止。 因此,这些按钮位于相同的位置,而我想要的是单击运行按钮时出现的暂停按钮,反之亦然。 发生了什么,它出现了一秒钟,但是由于页面重新加载window.location.href,我正在使用该页面将值发送回我的控制器,因此又恢复
2回复

重新加载页面后保留按钮属性

嗨,我正在尝试在html中设置按钮属性,当单击按钮属性时,单击按钮属性,当不重新加载页面时,这些更改效果很好。 我想在页面重新加载后保留按钮属性,如果单击了按钮然后重新加载了页面,则该按钮需要保持选中状态。 我已经在html中制作了这个示例,以展示我所拥有的 还有一个脚本,可以在单击或
1回复

用JS选择图像后重新加载页面

选择所有图像后,我需要重新加载页面。 我知道我的代码有误,但我不知道在哪里。 变量为Num。 我使用多个jquery库,HTML,CSS和JS。 档案: 脚本: HTML: 这是页面视图: 在此处输入链接描述
2回复

在Javascript中setAttribute后重新加载页面

我创建了一个简单的函数来使用 VueJS 从我的页面的明暗模式切换,但我的问题不是因为他,这里是代码: css 为什么,当我启动我的工具toogleTheme功能时,我的页面会重新加载? 我想动态执行此操作但不刷新我的页面:( 谢谢你的帮助