在Javascript中测量文本节点的边界框

我无法使用Javascript获取文本节点的大小(以像素为单位)。 例:

 

第一个文本块 第二个文本块

我需要独立获取两个文本块的边界框。 我可以通过测量元素来获得第二个块的大小,但第一个块让我望而却步。 据我所知,Javascript中的文本节点似乎没有高度或宽度。

包装中的第一个文本块并测量不是一个选项,因为我发现一个span不一定inheritance它上面的所有样式,当我包装文本时它会突然改变大小。 这就像Javascript的海森堡不确定性原则; 我尝试测量某些东西会改变它。

我正在构建一个将HTML分解为页面的应用程序(实际上是EPUB HTML),我需要知道页面上每个文本块的位置,高度和宽度,以便我知道是将它放在这个页面上还是下一页。

有什么建议?

您可以使用支持CSSOM View扩展的Range ,这是最新的浏览器(Firefox 4 +,自2009年初以来的WebKit,Opera 11,可能更早)和IE中的TextRangeTextRange代码很乏味,所以我在这里省略了它。

jsFiddle: http : //jsfiddle.net/gdn6C/1/

码:

 function getTextNodeHeight(textNode) { var height = 0; if (document.createRange) { var range = document.createRange(); range.selectNodeContents(textNode); if (range.getBoundingClientRect) { var rect = range.getBoundingClientRect(); if (rect) { height = rect.bottom - rect.top; } } } return height; } 

尝试制作您想要内联测量的元素。 内联元素仅占用所需的空间。 因此,它具有可以通过javascript检索的绝对宽度和高度。 块元素填充包含元素的整个宽度。 因此javascript无法访问其宽度。