问题标签 [getboundingclientrect]

我想要元素的 Y 坐标与 Y 值 = 0 之间的确切距离，我认为它是文档的顶部。

但是 getBoundingClientRect() 的值似乎在滚动时发生了变化。如何获得 myElement 和 Y 坐标 = 0（文档顶部）之间的实际距离？

如何getBoundingClientRect()为给定元素命名一个保存函数结果的变量。现在我总是使用类似sendButtonBoundingClientRector的名称，changeFontPanelBoundingClientRect但使用该命名约定名称很长。你们如何在项目中命名它？

我有一个divwithfloat: right并且我试图从视口顶部获得它的距离。在除 Safari 之外的所有浏览器中，我都从element.getBoundingClientRect().top. Safari 似乎在报告元素与页面顶部的距离，而不是视口。这与该方法的规范中定义的内容相反（据我了解）。是 Safari 只是没有遵守这里的规则，还是其他浏览器对我的一些我没有看到的错误更加宽容？

我正在研究一些使用Element.getBoundingClientRect(gBCR) 以及内联样式更新来执行计算的代码。这不适用于一般网站，我不关心或感兴趣是否有“更好的 CSS 方式”来完成这项任务。

JavaScript同步运行并执行以下步骤：

1. 获取父母的 gBCR
2. 进行计算，并且；
3. 父元素的子元素已更新内联 CSS 样式（例如大小和边距）
4. 再次获取父级的 gBCR

我是否保证计算的客户端边界将反映步骤 4 中父级的新边界矩形？

如果没有规范保证，这是现代¹浏览器实现的“保证”吗？如果“大部分保证”，有哪些值得注意的例外情况？

元素没有被添加到 DOM 或从 DOM 中删除，并且被修改的元素是父节点的直接子节点；如果此类限制/信息是相关的。

¹ “现代”：UIWebView (iOS 6+)、WebView (Android 2+)，以及常见的 Chrome/WebKit、FF、IE9+ 嫌疑人——包括移动版本。

我正在画布上执行绘图操作。在我看来，计算相对于画布左上角的光标位置的最佳方法是使用.getBoundingClientRect()：

我看不出这段代码有什么问题，它可以在 Firefox 中运行。测试一下。

然而，在谷歌浏览器中，我的调试行打印了这个：

x( NaN) = event.clientX( 166) - rect.x( undefined)

我究竟做错了什么？这不符合规范吗？

编辑：似乎我的代码遵循 W3C：

从规格：

getBoundingClientRect()

该getBoundingClientRect()方法在调用时必须返回以下算法的结果：

1. 让 list 成为调用getClientRects()此方法的同一元素的结果。

2. 如果列表为空，则返回其 、DOMRect和x成员为零的对象。ywidthheight

3. 否则，返回一个DOMRect描述最小矩形的对象，该对象包括列表中的第一个矩形和所有剩余的高度或宽度不为零的矩形。

DOMRect

背景：我目前正在开发一个项目，我的 JS 应用程序嵌入到多个其他（父）JS 应用程序中。某些父应用程序可以通过将 display:block/none 设置为包含我的应用程序的某些元素来显示/隐藏我的应用程序。其他父应用程序暂时从 DOM 中删除我的应用程序并稍后重新附加它。很少有父应用程序使用影子 dom，所以我无权访问父应用程序中的元素。

我需要一种方法来检查我的应用程序是否可见（在 DOM 内并显示；不关心可见性：隐藏且不必在视口内），而不更改父应用程序，所以我查看了getBoundingClientRect。

问题：至少在 chrome 上，如果元素或其祖先具有 display:none 或从 DOM 中删除， getBoundingClientRect返回 (w:0,h:0,l:0,t:0)。我找不到任何关于保证这种行为的文档，我想知道，使用 getBoundingClientRect 检查元素的可见性是否安全（从某种意义上说，这个逻辑不会改变）。

我还需要知道这种行为在所有主要浏览器中是否一致，包括 FF、IE8+ 和 Safari。这在任何地方都有记录吗？

最后，为什么是（0,0,0,0）？我觉得getBoundingClientRect在 (0,0,0,0) 实际上意味着不同的情况下应该返回 null 。有充分的理由吗？

编辑/附加问题：感谢 istos 指出返回 null 可能会破坏一些毫无戒心的代码，例如：

不是抱怨当前的行为，而是作为一个设计问题：返回一些非法的 Rect 值（例如负宽度和高度）代替 null 是否可以成为更有用的选择？

所以我在IE11中有这个......

四舍五入（我认为...）

不圆角

向下舍入（或最接近的整数）

显然，$(document) 和 $("html") 都是相同的，并且 jQuery 将 html 元素向下舍入，而不是像浏览器那样向上舍入。或者 IE11 为 $(document) 提供了一些额外的空间，增加了比 html 更高的像素数量？

我认为 html 应该代表整个文档？

我的问题：

它们应该是相同的宽度吗？就像在 Firefox、Chrome 等中一样。

我正在开发一个 chrome 翻译扩展，当按住 ctrl 键几秒钟时，扩展会获取光标下的单词，翻译它，然后在单词的顶部显示结果。

在处理获取光标下的单词时，我首先需要创建光标下单词的范围。我使用下面的代码片段来实现这一点。我参考here。https://stackoverflow.com/a/3710561/4244369

创建范围后，我可以range.toString()用来获取单词并range.getBoundingClientRect()决定显示结果的位置。它运行良好，直到遇到以下情况：

如果光标在“words”这个词下，它可以正常工作。但是，当光标在“sample”这个词下时，调用后range.expand('word')客户端rect是错误的，客户端rect的宽度应该是“sample”的宽度，但是，它是“示例词”的宽度。

我还在这里包含了一个 jsfiddle。https://jsfiddle.net/sangelee/1maqmm89/

是问题range.expand('word')吗？如何解决？或者不是使用range.expand('word')，有什么方法可以实现吗？感谢任何帮助！ps.我正在使用 chrome 39。

我当前的代码运行良好：

CSS：

HTML：

Javascript：

现在，到目前为止，一切正常，但是当我尝试像这样获取 lastChild (div#c) 时：

它不能正常工作。

这是我的 jsFiddle：http: //jsfiddle.net/hezi_gangina/3m2n9otr/

我有一组 ClientRect 对象，我通过这样做

我还有另一个元素的边界客户端矩形。

var currentElement = $('.active')[0].getBoundingClientRect();

我的问题是，我如何找到trackedBounds最近的北部currentElement？