javascript - JS 函数返回的 div 高度不正确。为什么？

Question

我尝试获取页面上主 div 的大小，以使 iframe 将其高度更改为内容，但document.getElementById("divId").offsetHeight（也尝试innerHeight）返回错误值。它总是返回 247，但实际上页面看起来减少了 75%。我知道页面没有完全加载，所以我将调整大小代码放在页面的页脚中，但它仍然返回 247。

$(document).ready(function() {
     console.log(document.getElementById("resizeDiv").offsetHeight);
});

有什么建议么？

Answer 1

我找到了其他决定，我只是得到了身高，而且效果很好：

var height = Math.max(
    document.body.scrollHeight, 
document.body.clientHeight, 
document.body.offsetHeight, 
document.documentElement.scrollHeight, 
document.documentElement.offsetHeight, 
document.documentElement.clientHeight);

Answer 2

添加 setTimeout 以等待屏幕加载并获得正确的高度。

setTimeout(() => {
    document.getElementById("resizeDiv").offsetHeight
}, 300);

Answer 3

试试这个

$(document).ready(function() {
     console.log($("#resizeDiv").height());    }
);

Answer 4

你已经在使用 jQuery，为什么不试试：

$(function() {
    $('#resizeDiv').height();
});

听起来您可能正在尝试根据其中的内容调整 iFrame 的大小。如果你想这样做，这个问题已经在这里得到了回答：

根据内容调整 iframe 的大小

Answer 5

document.getElementById("resizeDiv").offsetHeight，它以像素为单位给出元素的实际高度。该值包括任何填充和边框的高度。

document.getElementById("resizeDiv").style.height与 .height 类似，但您要求的是样式属性的高度部分。

document.getElementById("resizeDiv").height仅当元素具有高度属性时才有效，例如 IMG 标记：

<img src="..." width="200" height="300">

它是 的简写document.getElementById("resizeDiv").getAttribute("height")。

Answer 6

您可能需要在加载 DOM 后加载您的函数。

window.addEventListener('DOMContentLoaded', (event) => {
  // do something
});

请参阅Mozilla 文档

DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。

Answer 7

对象上的load事件在window整个页面加载时触发，包括样式、图像和其他资源。我们可以使用它来获得正确的高度：

window.onload = function () {
    element.offsetHeight;
}