javascript - 附加到 div 图像并计算它的高度并设置为 css

Question

我有这样的 js(我也用 jQuery):

  $(".article_big_photo").click(function() {
    $('#screen').css({ opacity: 0.5, 'width':$(document).width(),'height':$(document).height()});
    $('#screen').show();
    $('#article_photo_modal').show(); 
    var image = document.createElement("img");
    var url = $(this).attr("b_img");
    $(image).attr("src", url);
    $('#article_photo_modal').css({ 'margin':$(image).height()+" 0 0 -270px"});
    $('.photo_innerbox').append(image);   
  });

但是当我尝试获取图像大小时，我发现它的高度(根据我的代码)为 0。

如何附加、获取和设置 css 图像大小？我的代码不起作用

Answer 1

图片加载完成后需要获取高度

$(".article_big_photo").click(function() {
    $('#screen').css({ opacity: 0.5, 'width':$(document).width(),'height':$(document).height()});
    $('#screen').show();
    $('#article_photo_modal').show(); 
    var image = document.createElement("img");
    var url = $(this).attr("b_img");
    $(image).attr("src", url); 
    $(image).load(function(){
        $('#article_photo_modal').css({ 'margin':$(image).height() +" 0 0 -270px"});
    }); 
    $('.photo_innerbox').append(image);   
});