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);   
});

Answer 2

就像 Arun 说的那样，您必须在图像加载后获取高度。

你也可以试试这个：

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