獲取動態創建元素的高度

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 ，衡量，然後使其可見。

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); 
}); 

它將作品。