问题标签 [getboundingclientrect]

当用户在页面中选择文本时，我正在使用 Firefox Add-on SDK 创建一个面板。该面板应始终显示在所选文本的下方和右侧，因此我使用以下内容（在内容脚本中）来获取其位置：

该位置在事件中发送并用于定位面板。这很好用，但有两个问题：

• 页面缩放级别
• 浏览器边栏

getBoundingClientRect（甚至 getClientRects）返回的位置不考虑这些，因此如果侧边栏打开（左侧边栏使面板相对于文本向左移动）或应用缩放，则面板与右侧位置有偏移.

有没有办法总是计算应该显示面板的实际位置？（也许使用 sdk/window/utils 模块？）

这段代码给出了“theDiv”的宽度，它等于页面的宽度：

有什么方法可以获取 div 中实际文本的宽度（和高度）？

注意：我正在开发一个分析网页的 chrome 扩展 - 我无法更改 dom 和 css，这意味着我不能使用 span 代替 div 或更改元素的样式。

光标移过画布元素后，我无法清除光标图像（canvas.getBoundingClientRect）！我在画布上留下了一系列附加图像。

• 每次清除画布时，如何清除附加图像的痕迹并仍然保持我的自定义光标 (canvas.getBoundingClientRect) 可见？

查看我的代码：

我目前正在使用 getBoundingClientRect() 来确定元素是否进入视口。我真正需要做的是检查元素的 50%（或任何给定百分比）是否已进入视口（我正在检查滚动）。如果它是可见的，那么我更新页面上的一些文本说是，如果不是，那么文本说不。

我似乎无法理解这个逻辑，它开始让我发疯，有人能帮忙吗？

当前代码如下！

如何按百分比面积50% 或更多检测可见性元素？

Javascript：

JSFIDDLE

我有一个水平滚动条，你可以在这里看到......

http://codepen.io/anon/pen/rxxEQb

除了您可以无限期地向右滚动之外，它的效果非常好。

为了限制向右滚动（这样当没有更多项目时你不能继续向右滚动），我想检测最后一个按钮（id=lastButton）何时比向右滚动的链接更靠左（ id=goRightLink）。

我已将这两个控制台输出添加到 codepen，以便您可以按照我所看到的...

我无法理解这些数字 - 当我向右滚动到足够远以使最后一个按钮（按钮 30）可见时，我可以设置值“go-right-link: 1389, lastButton: 1313”（其中很棒），但是如果我向左滚动一点，使按钮 30 现在不在屏幕上，我可以设置值“go-right-link: 1246, lastButton: 1389”。然后更奇怪的是，我再次向左滚动并得到 lastButton 的负值（-549）。

与其在此处进一步痛苦地描述这一点，不如使用 codepen 中的控制台输出来查看数字在 Button 30 进出视图时如何变化可能更容易。

我要做的只是在数字中建立某种模式，告诉我何时应该阻止任何进一步的滚动权限（即当按钮 30 可见时）。

非常感谢任何想法！

- - - 编辑 - - - -

我找到了一个辅助解决方案（我没有将其作为答案发布，因为它没有回答与理解 getBoundingClientRect() 有关的问题）。我最终只是简单地将 ul 中的所有按钮相加（无论它是在屏幕上还是在屏幕外，都会给出宽度）......

然后在任何向右的转换之前添加此检查...

这只是因为 $("#tagUl").width() 的结果会随着 margin-left 属性的变化而变化（这是我没想到的！）

我正在为点击缩放（API！=缩放）的谷歌地理图表创建一个库

我需要获取 svg 路径的宽度或高度，以便过滤它们并将它们的坐标存储在数组对象中。我能够存储阿拉斯加和夏威夷的元素坐标，但是对于美国大陆，我必须更深入地走上一层，并且很难意识到我哪里出错了。

我在大陆节点列表上变得不确定。

在 IE11 中使用范围对象 getBoundingClientRect 时，它会报告错误的数字。它报告高度为 128，而实际高度为 74。它报告顶部偏移为 8，而实际顶部偏移为 35。

这是一个已知的错误？有没有办法在 windows ie11 中获得准确的数字选择。

这是一个截图供参考：

我收到此错误：

未捕获的 DOMException：无法从 'HTMLObjectElement' 读取 'contentDocument' 属性：阻止具有源“ http://localhost:8089 ”的框架访问跨域框架。（…）

当我尝试使用内容文档访问高度和宽度时：

当用户从他们的计算机加载本地文件而不是远程 url 时，这有效。

我尝试使用 jquery：

它不适用于第一次加载图像，但适用于第二次加载图像。

我想要一种访问 URL 输入（图像）的内容文档的方法 我如何访问作为 URL 加载的 svg 图像的 getBoundingClientRect() 方法？

有没有办法在渲染之前确定下一个 HTML 元素的位置（左上角位置）？

PS我发现了这个问题： JavaScript：在放置 <div> 对象之前检查它的宽度

但是因为这家伙需要宽度，他的选择就更少了。他们实际上还建议放置一个隐藏元素。

我没有使用 JQuery，只是使用普通的 Javascript。