javascript - 确定动态填充的 HTML 表格的高度

Question

我想用 HTML 绘制图表。定位结构如下所示：

<div id='hostDiv'>
  <div id='backgroundDiv'>
    ... drawing the background ...
  </div>
  <div id='foregroundDiv' style='position: absolute;'>
    ... drawing the foreground ...
  </div>
</div>

前景包含一个动态填充文本的 Table 元素，因此行高可能会根据进入单元格的文本量而改变。如何预测前景中 Table 元素的最终高度？我需要这些信息来设置正确的背景高度。有没有办法从 Javascript 预渲染表格并读出它的高度？还是其他什么技巧？

PS。hostDiv 的大小可能会随着浏览器调整大小而变化。

Answer 1

如果没有在目标浏览器中实际渲染它，就没有任何方法可以预测高度。

一旦你这样做了，你可以使用（例如）jQuery来获取元素的高度：

var height = $('#myTable').height();

Answer 2

使用 jquery 时，您实际上可以在表格呈现给用户之前找出表格的高度。使用这样的结构（从我上面的人那里借用代码）：

$(document).ready(function () { var height = $('#myTable').height(); });

Answer 3

在加载之前，您无法预测元素的整体高度，因为浏览器将根据相邻元素和查看窗口的大小来渲染和定位元素。

也就是说，您可以使用大多数 js 库来查找您要查找的内容。在原型中，它是：

$('navlist-main').offsetHeight

这将递归地累加每个子元素的渲染高度（不仅仅是样式化高度）以及任何相关的边距和填充，并返回元素高度的准确数字。

Answer 4

如果您只是不想在调整前 div 大小之前显示表格：
表格上设置 style.visibility="hidden"。与 display:none 不同，这不会从文档流中删除 div，因此前景 div 的大小仍将正确（表格将根本不可见）。

当然，如果可以接受，您可以将 foregroundDiv 移动到 backgroundDiv 并移除绝对定位。然后 backgroundDiv 将自动调整大小以包含foregroundDiv（和表格）。

Answer 5

我认为您可以使用其中一个 DOM 属性：clientHeight、offsetHeight 和 scrollHeight，如 w3 中定义的那样

这是clientHeight的用法：

document.getElementById("#Table").clientHeight;
document.getElementById("#Table").clientWidth;