Question

我在获得高度和计算其他计算方面遇到了问题。

我希望在加载后获得图像高度，所以我把它放在<img></img>函数的onload属性上，这是我的代码

<p class="test1" style="position:absolute;bottom:0px;">
   <img src="'+getBaseURL()+'js/check/no-image.png" rel="fullname"
        onload="verticalCenter()"/>
</p>

function verticalCenter(){
    var imageHeight = jQuery(".test1 img").height(); //I get a result of 0
    var total = imageHeight / 2 + 80
}

我已经尝试过使用setTimeout但它仍然失败。我打算在这里做的是将<p class="test1">的css设置成这样：

jQuery(".test1").css("bottom","-"+total);

正如我所说，这是行不通的，因为我总共得不到结果。

我如何做到这一点，有没有办法解决这个问题，我已经开始摸不着头脑了。

提前致谢！

Answer 1

$(window).load(function () {

    var imageHeight = jQuery(".test1 img").height(); //I get a result of 0
    var total = imageHeight / 2 + 80

}


<p class="test1" style="position:absolute;bottom:0px;">
   <img src="'+getBaseURL()+'js/check/no-image.png" rel="fullname"/>
</p>

Answer 2

您需要CSS尺寸上的单位。

jQuery(".test1").css("bottom","-"+total+"px");

您还应该检查以确保total是您在设置之前所期望的值。

http://jsfiddle.net/jfriend00/yHqr7/

Answer 3

在表单准备就绪时设置所有图像高度可能更容易：

$(document).ready(
    $('p.text1 img').each(verticalCenter);
)

除非您使用ajax加载图像;如果是这种情况，那么你应该使用live（）事件：

$('p.text1 img').live(verticalCenter);

然后在你的功能中你可以设置一切：

function verticalCenter(){
    $(this).css('bottom',"-" + ($(this).height() / 2 + 80) + 'px');
}

Javascript图像高度和其他计算

3 个答案: