Question

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

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

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

PS。随着浏览器调整大小，hostDiv的大小可能会有所不同。

Answer 1

如果没有在目标浏览器中实际呈现高度，则无法预测高度。

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

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

Answer 2

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

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

Answer 3

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

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

$('navlist-main').offsetHeight

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

Answer 4

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

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

Answer 5

我认为您可以使用DOM属性之一：clientHeight，offsetHeight和scrollHeight，如w3 here

中所定义

这是clientHeight的用法：

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

确定动态填充的HTML表的高度

5 个答案: