jquery 获取隐藏元素的偏移量

xxhby3vn  于 2023-01-04  发布在  jQuery
关注(0)|答案(4)|浏览(167)

我怎样才能得到隐藏元素的坐标?offset()不支持隐藏元素的使用。有什么提示吗?

3bygqnnd

3bygqnnd1#

如果你的元素被调用了.hide(),或者css中有display:none,浏览器根本不会渲染它。在这种情况下,答案并不直接。在最近的jQueries中,你甚至不能得到它的宽度或高度。
另一方面,如果您.show()一个元素,则在执行循环之前.hide()它(一个事件触发到没有更多的代码运行该事件),浏览器将被迫重新布局页面,您将能够获得它在显示和隐藏之间的偏移,但它不会被迫重新绘制,因此您的用户不会看到一个光点,而且性能损失也不会像您想象的那么大。

wj8zmpe1

wj8zmpe12#

你可以得到visibility:hidden元素的坐标,但是display:none元素被排除在渲染树之外,所以它的位置没有定义。

rhfm7lfc

rhfm7lfc3#

除了快速显示&做-东西&隐藏-过程,它可能是可能的,简单地使用加载掩码假装屏幕(或它的一部分)是不可见的。
当我在处理一个有隐藏元素的map时,我需要在不显示这些元素的情况下读取css-positions / offsets。我想出了三种可能的方法:

  • 暂时在map上加载mask,这样map就不会显示隐藏的元素,并读取偏移量(问题:覆盖也隐藏了父元素(Map))。如果没有需要显示的父元素,这个方法效果最好。
  • 更改隐藏元素的z索引,使其位于父元素之后,显示和读取值,隐藏它们并将z索引更改为原始值。
  • 为CSS样式使用单独的数据变量,这样它们就成为元素的一部分。如果元素相对于窗口或某个元素有固定/绝对位置,这很好用,因为CSS位置/偏移量不会根据窗口/元素的大小而改变。这在我的情况下很好用,因为我使用的是相对于窗口的绝对元素(全屏/-窗口应用程序)。

用户建议的其他方法也可以,但这完全取决于您正在处理的内容。

x4shl7ld

x4shl7ld4#

我最近偶然发现了Element.getClientRects(),它返回一个DOMRectList,其中包含DOMRect元素。我在我的网站上的一个隐藏元素上测试了它,它返回了

document.querySelector('#someHiddenElement').getClientRects()[0]

但是,如果您将其应用于多行,则会返回多个DOMRect,因此,您应该考虑多个/所有包含的DOMRect,而不仅仅是第一个。

相关问题