如何在使用 Vanilla JavaScript 调整浏览器大小时刷新变量？

Question

let size = carousel_images[0].clientWidth;我使用并clientWidth在不同的视口中变化来获取幻灯片图像的大小，这里carousel_images是指向img内部的.carousel，这是它在不同视口中的变化方式：@media screen and (min-width: 1024px) {  .carousel {    max-width: 994px;    img {      min-width: 994px;    }  }}@media screen and (min-width: 1200px) {  .carousel {    max-width: 1150px;    img {      min-width: 1150px;    }  }}所以当我调整浏览器的大小时，它看起来像：但是当我刷新页面时，它看起来又正常了。

Answer 1

您需要添加以下代码：

window.addEventListener('resize', ()=>{

    size = carousel_images[0].clientWidth

    carousel_slide.style.transform = `translateX(${-size}px)`

})

本质上，您需要resize在使用该变量的任何位置监听窗口事件、更新变量并再次执行代码。

Answer 2

我认为你必须为你的let size. 是全局变量吗？也许，将它放在函数或类中是个好主意。

您可以使用 resize 事件，该事件在您的窗口更改大小时触发。

以下演示来自： https ://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

const heightOutput = document.querySelector('#height');

const widthOutput = document.querySelector('#width');

function reportWindowSize() {

  heightOutput.textContent = window.innerHeight;

  widthOutput.textContent = window.innerWidth;

}

window.onresize = reportWindowSize;

<p>Resize the browser window to fire the <code>resize</code> event.</p>

<p>Window height: <span id="height"></span></p>

<p>Window width: <span id="width"></span></p>