javascript - 获取动态创建元素的高度

Question

我动态创建了一个 div 并尝试获取它的高度。我没有给它分配固定的高度。但是它的内容被分配了一个固定的高度。所以我试图得到它的渲染高度。

$(function(){
    $services = $(<div id="services"></div>);
    $img  = $(<img src="abc.jpg" height="100px" width="100px">);
    $a = $("<a href="home.php">Go to home</a>");
    $services.append($img,$a);
});

$(function(){
    var height = $("#services").height();
});

我得到的高度值为0。

所以我不能渲染高度div#services。

Answer 1

您需要在测量之前将元素添加到 DOM：

$('body').append($services);
var height = $("#services").height(); // works now

如果在使其可见之前需要它的高度，一个常见的技巧是将其添加到 DOM hidden中，测量它，然后使其可见。

Answer 2

您应该首先将这些 Dom 元素显示到页面！

在您的情况下， $services 不会显示在页面上，因此结果 $("#services") 将一无所获。

尝试这样做：

$(function(){
    $services = $(<div id="services"></div>);
    $img  = $(<img src="abc.jpg" height="100px" width="100px">);
    $a = $("<a href="home.php">Go to home</a>");
    $services.append($img,$a);

    //here
    $("body").append($services);
});

它会起作用的。