javascript - 当 div 的内容发生变化时，如何自动将 div 的大小调整为其内容的大小？

Question

目前，我有这个 DIV，在页面居中有一个注册表单。 DIV 的内容来自 ascx-page。这做得很好。现在，如果用户试图填写一个不唯一的名称，一些 jQuery 会在用户名字段旁边添加一条错误消息。这破坏了 DIV 的布局，因为现在的内容比以前宽了。所以我用谷歌搜索了这个问题，但找不到解决方案。

任何人都可以帮我找到一个很好的方法来做到这一点(伪 HTML/js):

<div id="myCenteredDiv" onChangeContents="resizeToNewSize()">
  <!-- div contents -->
</div>

<script type="text/javascript">
  function resizeToNewSize() {
    $("#myCenteredDiv").animateToSize($("#myCenteredDiv").contentWidth, 
      $("#myCenteredDiv").contentHeight);
  }
</script>

我正在寻找“onChangeContents”方法(和/或事件)和“div.contentWidth”属性。

非常感谢您帮助我!

更新:试图更清楚地解释问题

假设我有这个 DIV:

<div id="myDiv">
  <form ...>
    Enter your name: <input id="txtYourName" type="text" name="YourName" value="" />
    <span id="errorYourName"></span>
    <input type="submit" ... />
  </form>
</div>

假设我有这段 jQuery:

$(document).ready(function() {
  $("#txtYourName").live("blur", function() {
    if (validateInput($("#txtYourName").val())) {
      $("#errorYourName").html("");
      // entry 1
    } else {
      // entry 2
      $("#errorYourName").html("This name is not valid.");
    }
  });
});

...其中 validateInput(value) 为有效值返回 true。

现在好了。 SimpleModal 插件获取 div 并将其放置在页面中央，具有一定的宽度和高度，它以某种方式读取 div 的内容。所以 div 不会比输入框宽，因为此时 span 是空的。

当输入框失去焦点时，会在 span 中放入一条错误消息。这会破坏 div 的布局。

我可以将代码放入 entry 1 中，当错误消息被清除时，通过动画将 div 重新调整到某个大小，并将代码放入 entry 2 中，调整大小将 div 设置为更大的尺寸，以便错误消息适合。

但我最想要的是一种方法来判断 div 中的内容是否已更改，并相应地以动画方式自动调整 div。

有什么想法吗？再次感谢。

Answer 1

查询:

$(document).ready(function() {

var originalFontSize = 12;

var sectionWidth = $('#sidebar').width();



$('#sidebar span').each(function(){

    var spanWidth = $(this).width();

    var newFontSize = (sectionWidth/spanWidth) * originalFontSize;

    $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});

});

});

</script>

分区:

<div id="sidebar">

<span>fits the width of the parent</span><br />

<span>Hello</span><br />

<span>my</span><br />

<span>name</span><br />

<span>is</span><br />

<span>john</span><br />

<span>1</span><br />

<span>23</span><br />

<span>456</span><br />

<span>12345678910</span><br />

<span>the font size in the span adjusts to the width</span><br />

</id>

预览 http://jbdes.net/dev/js/fontsize.html