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

Question

我无法使用Javascript获取文本节点的大小（以像素为单位）。例如：

<p>
  first text block
  <b>second text block</b>
</p>

我需要独立获取两个文本块的边界框。我可以通过测量＆lt; b＆gt;来获得第二块的大小。元素，但第一个逃避我。就我所知，Javascript中的文本节点似乎没有高度或宽度。

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

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

有什么建议吗？

Answer 1

您可以使用支持CSSOM View extensions的Range执行此操作，TextRange是最新的浏览器（Firefox 4 +，自2009年初以来的WebKit，Opera 11，可能更早）和TextRange在IE中。 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; } 代码很乏味，所以我在这里省略了它。

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

代码：

{{1}}

Answer 2

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