如何使用 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. 它是全局变量吗？也许，将其放入函数或类中是一个好主意。您可以使用调整大小事件，该事件在窗口大小更改时触发。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>