微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript-获取元素相对于最顶部窗口的位置的函数

可能已经有人问过这个问题,但是我找不到要解决方法.

我试图找到事件对象上属性的神奇组合,以及滚动和其他偏移量,以便为我提供元素相对于iframe中可能存在或不存在的最顶部窗口的位置.我这样做是为了淡化被鼠标悬停在元素右侧的小图像(绝对定位).

我正在尝试获取jQuery悬停事件内的位置.我尝试了以下属性的不同组合:

$(element).position()
$(element).offset()
$(element).scrollTop()
$(element).scrollLeft();
$(document).scrollTop();
$(document).scrollLeft();
event.clientX
event.clientY
event.pageX
event.pageY

是否有人可以提供这些数字的函数或方程式?

解决方法:

在现代浏览器中,最简单的方法是document.querySelector(‘.foo’).getBoundingClientRect(),该方法返回的和对象包含属性top和left,这是元素相对于视口的偏移量.

上面的方法在IE> = 5中有效,并且有一些简单的技巧,见http://ejohn.org/blog/getboundingclientrect-is-awesome/

另外,如果页面上有jQuery,则可以使用jQuery.offset()方法.它将在整个浏览器中始终返回偏移量的元素.

从< iframe>获取所述元素的偏移.取决于您尝试从何处获取位置的技巧可能会有些棘手,即脚本与可能在< iframe>中的元素在同一页面上运行,还是在< iframe>中的元素在根页面中运行;

如果是第一种情况,则只要您将元素重新放置在< iframe>内的某处,就无需执行任何操作.因为您已经有正确的偏移量.

如果您不在< iframe>您需要考虑iframe.getBoundClientRect()偏移量,因为element.getBoundingClientRect()相对于其自己的视口(< iframe>)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐