獲取動態創建的元素的高度

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

如果需要在使其可見之前先使其高度，一個常見的技巧是將其添加到hidden的DOM中，對其進行測量，然后使其可見。

Answer 2

您應該首先顯示這些Dom元素以進行Page！

在您的情況下，$ 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);
});

它會工作。