如何使用 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>