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

最新推荐文章于 2022-05-01 19:56:24 发布

theanarkh

最新推荐文章于 2022-05-01 19:56:24 发布

阅读量1.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/THEANARKH/article/details/60884613

版权

javascript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

用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，就不会有这个问题。

theanarkh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算DOM元素的top时需要注意的一个问题

用jquery的offset函数可以很简单地获取某个元素的top，也就是离document的距离。但是有一个地方需要注意，这是容易引起bug的地方。<!DOCTYPE html><html><head> <title></title></head><body><script type="text/javascript" src="jquery-2.2.3-unzip.js"></s
复制链接

扫一扫