獲取動態創建的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的高度

回答

相關問題