如何使用 vanilla JS 在加载和调整窗口大小时查看元素大小？答案

【问题标题】：How do I watch the element size on load AND resize of the window with vanilla JS?如何使用 vanilla JS 在加载和调整窗口大小时查看元素大小？
【发布时间】：2019-11-17 07:29:53
【问题描述】：

我想自动调整<div id="main">something</div> 的高度，这样即使它是空的，它的最小高度也是全屏高度减去标题。它正在加载但不是调整大小。如果我调整大小，我必须刷新屏幕才能重新计算。我很想把这个手表放在屏幕上，这样它就可以即时调整大小。如何使用我当前的代码或其他方法做到这一点？

let main = document.getElementById('main');
let fullscreen = window.innerHeight;
let headerHeight = document.getElementById('navHeader').offsetHeight;
let newsletterHeight = document.getElementById('newsletter').offsetHeight;
let footerHeight = document.getElementById('footer').offsetHeight;
let addHeight = headerHeight + newsletterHeight + footerHeight;
let computedHeight = fullscreen - addHeight + 7;

window.addEventListener('load', function() {
  document.getElementById('main').style.cssText = `min-height:${computedHeight}px;`;
});

window.addEventListener('resize', function() {
  document.getElementById('main').style.cssText = `min-height:${computedHeight}px;`;
});

在我的代码中，我抓取了窗口 innerHeight、页眉高度、在页眉下方刷新的时事通讯元素高度以及页脚高度。把它们加在一起。然后电脑剩余部分作为我的主体不动产。这是根据大小和计算调整大小的元素。

这是你需要的空白页面的 HTML，（忽略 PHP 包含）

<html>
  <head>
    <title>Fitness & Lifestyle | Contact</title>
    <?php include ('./partials/header.php') ?>
  </head>
  <body>
    <?php include ('./partials/nav.php') ?>

    <section class="mt-7" id="newsletter">
      <?php include ('./partials/newsletter.php') ?>
    </section>
    <section id="main"></section>


    <?php include ('./partials/footer.php') ?>
  </body>
</html>

提前致谢

【问题讨论】：

你有什么理由不能只使用 CSS 吗？处理布局是它首先存在的重要原因之一。 :root { --hheight: 300px; } header { height: var(--hheight); } #main { min-height: calc(100vh - var(--hheight)); }?加分项：即使脚本被阻止，您的页面现在也会正确布局。
可能标题没有固定高度。无论如何，我希望不会..
如果它是一个标题，我当然希望它是，以便它在共享标题的所有页面之间保持一致。因为作为网站所有者，您知道标题中的内容。
但是您不知道浏览器将如何呈现字体，并且您希望浏览器会计算高度的其他一些小技巧。
所有要点！我想我没有考虑到这一点。我可以用 CSS 做到这一点。我就是这样。我正在尝试使用 JS 调整大小进行比较。但你是对的

标签： javascript

【解决方案1】：

这是因为您在页面加载时只计算了一次computedHeight。每次触发调整大小处理程序时，computedHeight 都是相同的值。

您需要在每次调整大小时重新计算它。像这样的：

function resizeMain() {
  let main = document.getElementById('main');
  let fullscreen = window.innerHeight;
  let headerHeight = document.getElementById('navHeader').offsetHeight;
  let newsletterHeight = document.getElementById('newsletter').offsetHeight;
  let footerHeight = document.getElementById('footer').offsetHeight;
  let addHeight = headerHeight + newsletterHeight + footerHeight;
  let computedHeight = fullscreen - addHeight + 7;
  document.getElementById('main').style.cssText = `min-height:${computedHeight}px;`;
}

calculateHeight();
window.addEventListener('load', resizeMain);

不过，我不确定这是一种明智的方法，因为每次调整大小时，您都会进行一些繁重的计算。您可能想要使用某种debounce 函数。

【讨论】：