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

Question

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

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

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

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

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

有什么建议？

Answer 1

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

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;
}