Question

我曾经使用cumulativeOffset（）和getDimensions（）来计算元素的边界框，但只是意识到cumulativeOffset返回元素的 start 的左上角。含义：如果内联元素换行，并且下一行比开头更靠左边，我会得到一个移位的边界框。

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

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

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

Answer 1

我也没有看到boundingBox（）函数，但是我想知道在父级上使用相同的技术（cumulativeOffset()和getDimensions()）：getOffsetParent()会做什么的你想。 getOffSetParent()：

“返回元素最接近的位置祖先。如果没有找到，身体返回元素。“

哪个应该考虑到第二行还剩下的自动换行。

Answer 2

我从来没有听说过这样做的方法。您可以设置它的位置：relative，将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年以来在大多数浏览器中都有at least partial support。享受！

P.S。 getClientRects()对于获取包装文本的各个边界框也非常有用。它似乎与getBoundingClientRect()具有相同的浏览器支持，因为它取决于另一个，this source表明它得到了很好的支持。

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

4 个答案: