猿问

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

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;

    }

  }

}

所以当我调整浏览器大小时,它看起来像:

但当我刷新页面时,它看起来又正常了。

https://img.mukewang.com/64edc5400001cc5a06520275.jpg

这是完整的代码笔链接,谢谢。



慕标5832272
浏览 108回答 2
2回答

慕哥6287543

您需要添加此代码:window.addEventListener('resize', ()=>{     size = carousel_images[0].clientWidth     carousel_slide.style.transform = `translateX(${-size}px)`})本质上,您需要监听窗口resize事件、更新变量并在使用该变量的任何地方再次执行代码。

江户川乱折腾

我认为你必须为你的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>
随时随地看视频慕课网APP

相关分类

Html5
我要回答