获取图像相对于父对象的位置，同时考虑垂直偏移

Get position of image relative to parent, taking vertical-offset into consideration

本文关键字：垂直 相对于 图像 对象 位置 获取      更新时间：2023-09-26

我在HTML中有两个相邻的图像。一个图像比另一个高。图像具有vertical-align: middle CSS属性。这会导致较短的图像相对于父容器的位置低于较高的图像。

我使用jQuery .position()方法来获取图像的位置。当较短的图像由于vertical-align: middle CSS属性而进一步向底部偏移时，两个图像的position.top是相同的。

考虑到vertical-align: middle CSS属性引起的垂直差异，我如何获得图像的实际位置？

更新：

问题的发生是因为我做了以下事情：

  1. 我的HTML输出的图像并没有src属性。他们确实具有宽度和高度，因此浏览器不需要等待在计算其位置之前加载实际图像（稍后的步骤）
  2. 我设置了每个图像的src属性
  3. 我使用jQuery检查位置。我的猜测是浏览器（FF9.0.1）等待加载图像，然后更新其位置并使其可用于JS

我需要重新设计我的应用程序，这样就不会发生这种情况。

试试这个

http://jsfiddle.net/cadence96/X54gy/

small = parseInt($('img:eq(0)').css('height'));
big = parseInt($('img:eq(1)').css('height'));
difference = big - small;
top_distance = difference/2;
alert(top_distance);

只需得到较高的div的高度，减去有问题的div的高度，然后除以2。这将为您提供其相对于父div的偏移量。

使用jquery.offset会给出它相对于全身的实际位置。如果你只想让它相对于它的父级，你可以这样写一个脚本；

function findPos(obj,till){
    var curleft = curtop = 0;
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
    return [curleft,curtop];
}

（c） Peter Paul Koch

相关文章：