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

Question

I have such js (also i use 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);   
  });

but when i try to get image size, i see that it's height (according my code) is 0.

How can i append, get, and set to css image size? My code didn't work

Answer 1

you need to fetch the height after the image is loaded

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

Answer 2

Like Arun said you must fetch the height after image load.

You can also try this:

var img = new Image();
img.src = $(this).attr("b_img");
img.height;