在Javascript中测量文本节点的边界框
我无法使用Javascript获取文本节点的大小(以像素为单位)。 例:
第一个文本块 第二个文本块
我需要独立获取两个文本块的边界框。 我可以通过测量元素来获得第二个块的大小,但第一个块让我望而却步。 据我所知,Javascript中的文本节点似乎没有高度或宽度。
包装中的第一个文本块并测量不是一个选项,因为我发现一个span不一定inheritance它上面的所有样式,当我包装文本时它会突然改变大小。 这就像Javascript的海森堡不确定性原则; 我尝试测量某些东西会改变它。
我正在构建一个将HTML分解为页面的应用程序(实际上是EPUB HTML),我需要知道页面上每个文本块的位置,高度和宽度,以便我知道是将它放在这个页面上还是下一页。
有什么建议?
您可以使用支持CSSOM View扩展的Range
,这是最新的浏览器(Firefox 4 +,自2009年初以来的WebKit,Opera 11,可能更早)和IE中的TextRange
。 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; }
尝试制作您想要内联测量的元素。 内联元素仅占用所需的空间。 因此,它具有可以通过javascript检索的绝对宽度和高度。 块元素填充包含元素的整个宽度。 因此javascript无法访问其宽度。