javascript - 找到包含所有 <div> 的边界框

Question

我有 (1) :

• 一个大容器:<div id="container">其中有 absolute定位

• 在这个容器内，很多 <div class="txt">其中有 absolute定位也是如此

我想找到包含所有 <div class="txt"> 的边界框 的坐标元素。我有这段代码:

minX = 1000000, maxX = - 1000000;
minY = 1000000, maxY = - 1000000;
$(".txt").each(function(index) {
  minX = Math.min(minX, parseFloat($(this).css("left")));
  maxX = Math.max(maxX, parseFloat($(this).css("left")));
  minY = Math.min(minY, parseFloat($(this).css("top")));
  maxY = Math.max(maxY, parseFloat($(this).css("top")));
});

我不认为这真的是正确的因为maxX将包含每个元素的 left 的最大值，因此每个元素的 top-left-corner 的最大值。所以布丁框不会包含<div>这是最左边的。 然后，为了考虑到这一点，我可以计算

maxX = Math.max(maxX, parseFloat($(this).css("left")) + parseFloat($(this).css("width")))

但它开始变脏了。

是否有更优雅的方式来了解大量元素的边界框？

---

注意事项:(1) :它用于我名为 BigPicture 的元素, 网站上的 div 名称略有不同。

(2):这是否更适合 codereview.SE？

Answer 1

如果您使用 jQuery，请使用 .position()获取元素的坐标可能更容易，使用 .width()和 .height()获得其他需要的值。这些值已经是数字，因此不需要解析函数。

$(".txt").each(function(index) {
    var position = $(this).position();
    var width = $(this).width();
    var height = $(this).height();

    minX = Math.min(minX, position.left));
    maxX = Math.max(maxX, position.left + width);
    minY = Math.min(minY, position.top);
    maxY = Math.max(maxY, position.top + height);
});

您也可以考虑使用 vanilla JavaScript，here可以帮助您移植代码库的链接。

如果不需要 IE < 9 兼容性:

var textElements = document.getElementsByClassName('txt');
for(var i = 0; i < textElements.length; ++i){
    minX = Math.min(minX, textElements[i].offsetLeft);
    maxX = Math.max(maxX, textElements[i].offsetLeft + textElements[i].offsetWidth);
    minY = Math.min(minY, textElements[i].offsetTop);
    maxY = Math.max(maxY, textElements[i].offsetTop + textElements[i].offsetHeight);   
}