获取动态创建的div的高度

我已经通过Ajax调用创建了div class = box并附加到主div。此div class = box根据其内容更改其高度。我需要它的高度，但.height（）返回0 ....获取动态创建的div的高度

$.ajax({ url: "json/news.json", 
     dataType: "json", 
     contentType: "application/x-www-form-urlencoded;charset=UTF-8", 
     success: function(data){ 
      var html ="<div class='box'>"+data.box+"</div>"; 
     } 
    }); 
// now i want its height 
var j = $('.box').height();

任何建议吗？谢谢

来源

2010-11-02 Ste

看起来不像要附加任何东西！？你也可以发布你写的代码将HTML附加到主div吗？ – gideon 2010-11-02 17:26:19

@user：你是否在某处使用/追加'html'变量？您目前的代码没有显示。 – Sarfraz 2010-11-02 17:26:24

通常您可以使用Firefox插件Firebug并调试所有DOM变量的值和属性。在JavaScript中使用关键字调试器来触发调试器断点。在这种情况下，你会注意到在成功回调之前调用的height（）。 – 2010-11-02 17:38:37

有2个问题在这里：

$.ajax是异步的，所以它在success回调运行之前不会创建任何内容。如果要衡量你的盒子，你将需要做的是在回调：

$.ajax({ url: "json/news.json", 
    dataType: "json", 
    contentType: "application/x-www-form-urlencoded;charset=UTF-8", 
    success: function(data){ 
     var html ="<div class='box'>"+data.box+"</div>"; 
     var j = $('.box').height(); 
    } 
});

您不添加自己的HTML中任何东西，因为它不是DOM的一部分也不会具有高度。你需要做类似下面：

success: function(data){ 
    var html ="<div class='box'>"+data.box+"</div>"; 
    $("body").html(html); 
    var j = $('.box').height(); 
}

来源

2010-11-02 17:27:30

好的，但我可以在回调之外使用var J吗？ – Ste 2010-11-02 17:38:07

在回调之外使用它是没有意义的（至少，就像你在原始例子中那样），因为它没有价值。你想用'j'做什么？ – 2010-11-02 17:39:11

我想用J为其他div设置高度。可能吗？ – Ste 2010-11-02 18:58:20

你的代码的最后一行是之前的 ajax cal返回。把需要在回调高度的代码（实际上添加的HTML的文件）：

$.ajax({ url: "json/news.json", 
     dataType: "json", 
     contentType: "application/x-www-form-urlencoded;charset=UTF-8", 
     success: function(data){ 
      var html ="<div class='box'>"+data.box+"</div>"; 
      var height = $(html).appendTo('body').height(); 
     } 
});

来源

2010-11-02 17:26:08

尝试是http://api.jquery.com/outerHeight/

var j = $('.box')outerHeight();

来源

2010-11-02 17:30:58

获取动态创建的div的高度

回答

相关问题