Question

我有一个容器，其中有div元素，具有绝对定位。如何计算容器的大小？这是一个例子，因为它现在正在工作。（尺寸计算不正确）：

var container = $("#container");
var inc=0;
for (var i = 0; i < 100; i++) {
    var div = $("<div/>");
    div.css("left", (100 * i + inc));
    container.append(div);
    inc+=3;
}

$("body").append("<span>SIZE CONTAINER: "+ container.width()+"</span>");

https://jsfiddle.net/udj71yyx/

所有元素的选项枚举为：size = width * lastIndex。不合适。感谢你！

Answer 1

当您创建子元素position:absolute时，您将无法获得正确的width。

这是另一种方式，它将为您提供实际寻找的适当宽度，

var container = $("#container");
var width = 0;
var inc=0;
for (var i = 0; i < 100; i++) {
    var div = $("<div/>");
    div.css("left", (100 * i + inc));
    container.append(div);
    inc+=3;
    width = width + $("#container div").eq(i).width();
}

$("body").append("<span>SIZE CONTAINER: "+ width +"</span>");

<强> DEMO

Answer 2

请使用prop('scrollWidth')。

$("body").append("<span>SIZE CONTAINER: "+ container.prop('scrollWidth')+"</span>");

WORKING FIDDLE

Answer 3

检查更新fiddle。计算添加到容器的div的宽度。

var container = $("#container");
var inc=0;
var wdith = 0;
for (var i = 0; i < 100; i++) {
  var div = $("<div/>");
  div.css("left", (100 * i + inc));
  container.append(div);
  console.log(div.width());
  wdith += div.width();
  inc+=3;
 }
 $("body").append("<span>SIZE CONTAINER: "+wdith+"</span>");

Answer 4

您可以遍历divs中的孩子#container，并使用getBoundingClientRect() - 如果#container，最大的正确值将是宽度。

var container = $("#container");
var inc=0;
for (var i = 0; i < 100; i++) {
    var div = $("<div/>");
    div.css("left", (100 * i + inc));
    container.append(div);
    inc+=3;
}

var cont = document.getElementById('container'), 
    select = cont.querySelectorAll('div'), 
    select = Array.prototype.slice.call(select), 
    totalWidth = 0; 

select.forEach(function(node) {  
    if (totalWidth < node.getBoundingClientRect().right) {
        totalWidth = node.getBoundingClientRect().right; 
    }
}); 

$("body").append("<span>SIZE CONTAINER: " + totalWidth +"</span>");

#container div {
    width:100px;
    height:100px;
    background:black;
    position:absolute;
}

#container {
    position: relative;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

span{ position:relative;   top:300px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

如何计算元素定位的容器的大小？

4 个答案: