javascript - 動的コンテンツで親要素のサイズを変更する

Question

唯一の子要素として h1 を持つスタイルの div があります。h1 のテキストは、javascript によって動的に変更されます。

新しいテキストが h1 タグに挿入されると、その h1 の高さが測定され、親の div 要素の高さを変更するために使用されます。

ただし、親 div は h1 の高さに変更されますが、パディングが含まれているため、実際のパディングはありません。

動的な h1 子の測定された高さを使用するときに、パディングを使用して親要素のサイズを正しく変更するにはどうすればよいですか (パディングを考慮して)。

score 0 · Accepted Answer

親divの幅と高さを「自動」にするだけで、h1のサイズが変更されると自動的にサイズが変更されます

score 0 · Accepted Answer

この例でわかるように、CSS パディングを追加することにより、ブラウザーはこれを自動的に処理する必要があります。これを具体的に処理するためにスクリプトを作成する必要はありません。以下の例では、赤いボックス (h1) にテキストが追加されると、黒いボックス (div) が垂直方向に動的に拡大します。

HTML:

<input type="text" id="txt" value="1 2 3 4 5 6 7 8" />
<div class="d1">
    <h1 id="h1" class="h1">1 2 3 4 5 6 7 8</h1>
</div>

CSS:

.d1 {
    border: 1px solid black;
    padding: 5px;
}

.h1 {
    border: 1px solid red;
    padding: 5px;
    width: 50px;
}

脚本：

$("#txt").change(function () {
    $("#h1").text($("#txt").val());
});
$("#txt").keyup(function() {
    $("#h1").text($("#txt").val());
});

2 に答える 2