javascript - 使用动态内容调整父元素的大小

Question

我有一个样式化的 div，它的唯一子元素是 h1。h1 的文本通过 javascript 动态变化。

当新文本插入到 h1 标记中时，会测量该 h1 的高度，然后用于更改其父 div 元素的高度。

然而，父 div 更改为 h1 的高度，但包括填充，因此导致没有实际的填充。

使用动态 h1 子项的测量高度时，如何获得具有填充的父元素以正确调整自身大小（考虑填充）。

score 0 · Accepted Answer

通过添加 CSS 填充，浏览器应该自动处理这一点，如本例所示。您不需要编写脚本来专门处理这个问题。在下面的示例中，黑框 (div) 将随着文本添加到红框 (h1) 中而垂直垂直增长。

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

score 0 · Accepted Answer

只需将父 div 的宽度和高度设为“自动”，然后当 h1 调整大小时它会自动调整大小

2 回答 2