如何使用原型获取包装内联元素的边界框

Question

我曾经使用cumulativeOffset（）和getDimensions（）来计算元素的边界框，但是我刚刚意识到cumulativeOffset返回元素开始处的左上角。 意思是：如果一个内联元素换行，并且下一行比开始处左方多，我将得到一个位移的边界框。

经过研究后，我发现可以使用getClientRects（）获取所有矩形。 然后，我可以通过，然后将矩形的最左侧移至最左侧。

我想知道是否有更好的方法...我只是没有找到boundingBox（）原型函数。 我忽略了吗？

编辑：我还发现所有浏览器都不支持getClientRects（），所以这不是解决方案。

Answer 1

我也没有看到boundingBox（）函数，但是我想知道是否可以通过getOffsetParent()在父对象上使用相同的技术（ cumulativeOffset()和getDimensions() ）来实现所需的功能。 getOffSetParent() ：

“返回元素的最接近的祖先。如果未找到，则返回body元素。”

哪个应该解决换行问题，第二行就在哪儿。

Answer 2

我从未听说过这样做的方法。 您可以将其设置为相对：将绝对定位的1x1 div放到其中，将其右移：0：获取该div的LEFT + WIDTH，然后从该值中减去原始内联项的偏移宽度。

话虽如此，但总的来说，也许您需要重新考虑您要这样做的原因！

Answer 3

对于多行内联元素，dfitzhenry提供的解决方案似乎不起作用。 这是我的Javascript解决方案：获取内联元素nextSibling，检查它是否为内联元素，否则创建一个新的内联元素，将其添加到内联元素的父元素中，然后获取其offsetLeft：

 var parentContainer = inline_elm.parentNode;
 var nextsib = inline_elm.nextSibling;
 var remove_next_sibling = false;
 if(!nextsib || nextsib.clientWidth != 0){
     remove_next_sibling = true;
     var temp= document.createElement('span');
     parentContainer.insertBefore(temp, nextsib);
     nextsib = temp;
 }

 var inline_bounding_right = nextsib.offsetLeft;
 if(remove_next_sibling)    parentContainer.removeChild(nextsib);

Answer 4

这是一篇旧文章，但是现在获取边界框的标准方法是getBoundingClientRect() ，所有主要浏览器都支持该方法，并且自2009年以来，大多数浏览器都至少提供了部分支持 。 请享用！

PS getClientRects()对于获取包装文本的各个边界框也非常有用。 它似乎与getBoundingClientRect()具有相同的浏览器支持，因为一个浏览器依赖于另一个浏览器，并且此消息源表明它得到了很好的支持。