计算DOM元素的top时需要注意的一个问题

来源：互联网发布：php公益培训编辑：程序博客网时间：2024/05/16 16:59

用jquery的offset函数可以很简单地获取某个元素的top，也就是离document的距离。但是有一个地方需要注意，这是容易引起bug的地方。

<!DOCTYPE html><html><head>    <title></title></head><body><script type="text/javascript" src="jquery-2.2.3-unzip.js"></script><img src="" style="height: auto" /><div id="test">hellow world</div><script type="text/javascript">setTimeout(() => {    $("img").attr('src', '1.png');},0)console.log($("#test").offset().top);</script></body></html>

运行上面的代码，然后再打开console运行console.log($(“#test”).offset().top);会惊讶地发现这两个值并不一样，印象中，一个DOM的top是不会变的，但是这里是什么问题呢，问题在于，如果一个DOM节点的上面有需要一部加载的资源时并且这个资源的高度是auto时，例如图片，可能会导致问题，因为当你进入页面时，你去获取某个DOM节点A的top时，这时图片还没有加载回来，并且他的高度设置成auto，所以他的大小是0px，等图片加载回来时，A的top已经变了，值差不多是等于原来的值加上图片的大小，所以这个地方需要注意。如果图片的大小是固定大小，比如height:200px，就不会有这个问题。

0 0