Question

有没有办法使用Javascript获取实时width和height值，并将它们应用于多个div id？我想构建一个包含5个始终为width: 100vw和height: 100vh的部分的网站。一次只能看到一个部分，因为每个部分都有一个#锚点，并且垂直滚动被禁用。

我遇到的问题是，当我调整浏览器窗口大小时，CSS无法跟上，必须刷新width和height部分的新值。我想知道Javascript是否有办法持续监控浏览器width和height并将这些值应用于一组id。

示例

浏览器窗口为1000px x 500px，因此id #one, #two现在有width: 1000px和height: 500px，当浏览器调整为1200px到600px时，#one , #two的值会在CSS中设置为width: 1200px和height: 600px。

这是我的 codepen 。

Answer 1

正如@ gary-storey所说，使用resize事件：

$(window).resize(function() {
   var curWinWidth  = $(window).width();
   var curWinHeight = $(window).height();
   // do stuff here
});

Answer 2

我已经为自己的页面做过这样的事情：

$(window).resize(function() {
    <!-- get viewport size//set content size -->
    var currentViewPortHeight = $( window ).height();
    var currentViewPortWidth = $( window ).width(); 
    $("#mainFrame").css({ "height" : currentViewPortHeight, "width" : currentViewPortWidth });
    $("#mainFrame").resize();   
};

您可以设置超时间隔 - 因为此事件在窗口调整大小期间经常触发 - 尤其是在用户使用拖放时。根据我的stackoverflow研究，最好的是300毫秒超时，以获得平滑的调整大小过渡，而不是经常触发...

如何获取浏览器视口宽度; Javascript中的高度并应用于CSS ID＆＃39; s？

2 个答案: