javascript - 動的に作成された要素の高さを取得する

Question

1 つの 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);
});

それは動作します。