如何在HTML DOM中计算当前显示分辨率的顶部和td元素的底部位置之间的大小/空间

Question

如何使用JQuery框架或Java脚本计算HTML DOM中当前显示分辨率的顶部和td元素底部位置之间的大小/间距？

在我的html DOM中具有灵活的显示分辨率，具有特定的html标签（在当前情况下为"td"标签）。

现在，计算从当前显示分辨率顶部到 htmls 元素的大小对我来说很重要。

我该如何计算？

Answer 1

使用 .getBoundingClientRect 怎么样？

var div = document.getElementById('test'),
  rect = div.getBoundingClientRect();
console.log(rect.bottom);

使用表格的 JS 小提琴演示

在演示中，我只是打印出 td 元素内的底部位置。如果您需要在调整窗口大小时重新设置它，您可以使用一个简单的事件侦听器来启动函数（即 window.addEventListener('resize', someFunction)...

不过要注意 - 不要过多地使用客户端 rect 或偏移函数（不要与频繁的事件等绑定） - 它们是布局的昂贵函数。

Answer 2

也许是这样的？

var elementOffset = $('#element').offset().top+$('#element').height();

offset（）.top 是窗口顶部和元素顶部之间的距离（以 px 为单位）。在您的情况下，您需要窗口顶部和元素底部之间的距离，因此您必须将该元素的高度添加到 offset（）.top 中。