找到包含所有<div> </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的最大值，因此每个元素的左上角的最大值。因此，bouding-box 不会包含左侧最多的<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＆lt;不需要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);   
}