估计（计算）HTML元素的维度（用于书籍分页）

Question

首先，我将描述目的。

当窗口（视口）的大小为时，我遇到了计算Book Paging的问题 改变。我想根据当前视口大小计算书中的所有页面（可能还有其他参数作为字体大小）。浏览器的任务非常繁重，如果我将元素呈现在不可见层中，则获取大小并计算。

有没有办法以某种方式更有效地估计（实际计算）HTML元素的维度（可能没有用jquery渲染它）。

Answer 1

如果你在具有可见性时进行渲染：隐藏，它仍将具有尺寸。

对于宽度使用document.getElementById（'someid'）。offsetWidth

高度使用document.getElementById（'someid'）。offsetHeight

对于视口，请使用window.availWidth和window.availHeight

Answer 2

任何给定元素的维度都依赖于一大堆不同因素，包括该元素的CSS，内容和浏览器处理。要以编程方式计算实际高度，您必须解释并计算所有这些不同的变量。您可以通过查看元素中呈现的单词或行数来获得粗略估计，但这并不准确。

首先渲染元素是了解浏览器将其呈现为真实尺寸的唯一方法。如果您可以使用一些聪明的逻辑来仅在用户查看时一次处理一个页面，那么您可以解决性能问题。