问题标签 [getboundingclientrect]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 根据 SVG 元素顶部位置定位工具提示
我被这个困住了：
我得到了这个 Raphael 生成的 SVG 图形，它有 300 多个多边形。我想在悬停多边形时显示工具提示。我希望工具提示位于悬停路径旁边。
到目前为止，一切都很好......我可以使用 .pageX 和 .pageY 属性。
现在，这就是我现在卡住的地方......
我不完全希望工具提示位于鼠标进入的位置，而是与多边形的顶部对齐，而不管鼠标进入的位置。
我显然在发布之前做了一些研究，发现 .getBoundingClientRect() 方法可能是我需要的。不幸的是，我无法让它工作。控制台返回“无法读取未定义的属性‘getBoundingClientRect’。
我对javascript不太好，任何帮助将不胜感激！
这是代码：
javascript - 确定文档中不存在的某些 DOM 元素的实际渲染高度的最快方法
我需要创建一些 DOM 元素并计算它们的实际渲染高度。我编写了一些代码来首先创建所有它们并将它们插入到文档中，然后使用 getBoundingClientRect 方法计算它们的高度。但是元素的数量很大，这个过程的时间对于我的应用来说太长了。有没有更快的方法来做到这一点？
javascript - 节流滚动事件处理期间的 getBoundingClientRect
我在项目开发过程中遇到了一个问题，它与getBoundingClientRect调试期间有和没有预防性断点的值之间的差异有关。为了尽量减少复制，我得到了关注。
其中viewport只是具有固定高度的可滚动div。的内容viewport足够大，可以触发至少一个滚动事件。我还创建了Plunker 演示。所有的魔法都发生在setTimeout回调内部。
现在是步骤。成功场景。
setTimeout在回调开始时设置断点。- 触发滚动事件。
- 让“跨过”来获得
top价值。 document.getElementById('test').getBoundingClientRect().top在控制台中执行。- 3和4的结果是一样的。
失败的场景。
setTimeout在回调结束时设置断点。- 触发滚动事件。
- 获取
top变量的值（无需任何操作）。 document.getElementById('test').getBoundingClientRect().top在控制台中执行。- 3和4的结果不一样。
为了避免对这个再现产生任何误解，我用上述步骤录制了一个简短的演示电影。
在我的项目中，我在类似的环境（节流滚动事件）中进行计算，并得到与预期不符的错误结果。但是当我调试它时，我得到了不同的画面；预防性断点修复计算。
是错误还是已知问题？还是我错过了什么？我应该拒绝getBoundingClientRect在这种情况下使用吗？
javascript - 函数未执行。滚动事件监听器
因此，在我的 HTML 中，我有一个名为 .myFeature_info 的类，并且我在<body>标签末尾包含了以下脚本。
我想知道为什么在滚动时没有调用该函数。
这是代码，我很想知道“为什么”，我只想使用 JS。
javascript - React 获取活动元素的 Ref 以获取 getBoundingClientRect().x
您好，我有一个关于如何从活动元素中获取 React 元素（名为spanNav2 ）的 Ref 的问题。下面的示例完美运行。我可以使用getBoundingClientRect().x获取x值并移动 span 元素（见下文）。唯一的问题是spanNav2是固定的。我只想能够获得数字2并将其替换为注入的数字（值），就像我在导航元素中所做的那样。
在渲染元素内部，我有：
在页面底部，我有一个样式化的 span 元素，我想将它移到左侧以位于活动元素下方（来自 React Router 的 NavLink）
谁能指出我正确的方向？谢谢
javascript - getBoundingClientReact 不存在
我已经构建了一个组件，它将根据它在窗口中的尺寸和位置来确定它的打开方向。我在 react-dom 节点上使用了 getBoundingClientRect() 函数。现在我已经更新了一些项目包，包括 react 和 react-dom 到 16.3.2。现在我得到一个编译错误：
这是一段使用此功能的代码：
任何实现此功能的帮助或建议将不胜感激。
Edit2：此问题的原因是将 @types/react-dom 更新到 16.0.5 版本。
d3.js - getBoundingClientRect() 为所有元素返回相同的值
我正在为我的图表创建一个图例。我需要根据前一个元素的宽度为不同元素动态选择 x 值。我为此使用 getBoundingClientRect() 。问题是它为所有不同的元素返回相同的值（第一个元素的值）。我将它记录到控制台。
nameText 是我在primaryTotal 之前绘制的元素。
我将其附加到此处创建的组中。
nameText 和 legendRect 的声明。它们都是我在传奇中使用的元素。
这就是记录到控制台的内容....
显示 getBoundingClientRect() 输出的控制台日志
不知道如何进行。任何帮助将不胜感激。谢谢
css-transforms - 计算两个重叠元素的变换原点
我有一个图像（表示为绿色）覆盖一个框（表示为蓝色），并且图像transform: scale()的大小将变大。发生这种情况时，我需要图像的所有边缘同时完成它们的转换。
为此，我需要transform-origin使用 JavaScript 根据图像位于边界框上方的位置来计算。假设我知道getBoundingClientRect()为这两个元素提供的所有坐标。
在下面的六个示例中，我在变换原点百分比应该相交的地方放置了一个红点。
我只是无法弄清楚到达那里的数学。我最接近找到答案的是this question，但它有点模糊，我不确定我是否完全理解答案本身。我将不胜感激，如果我遗漏了什么，我很乐意提供更多细节。
javascript - 使用 Javascript getBoundingClientRect 将项目捕捉到网格
编辑：我已经将代码（在下面和小提琴中）简化为需要解决的主要问题，以期创造更多的可读性。
我已经实现了 Bader 的解决方案，以正确使用getBoundingClientRectvalue 并使用来获取函数所需document.querySelector的类名和标签。html我现在想转到以 . 开头的代码的最后五行var = style。
我现在已经更正了最后两个变量的数学运算。
→ 我正在尝试实现创建一个捕捉功能，以便与基线网格 Sass 插件Plumber一起使用。
基本上，我有一个垂直居中的弹性项目，它需要——而不是完全居中——向上对齐最近的网格线。这将使我能够在基于移动设备的自定义体验中在幻灯片之间保持一致的垂直节奏。
我getBoundingClientRect用来计算对象底部和窗口顶部之间的距离。
然后我用Math.floor四舍五入到我的 rem 值的最接近的倍数。
然后我使用这个新值在 flex-centered 容器上创建一个 CSS 底部边距，用于对齐修复。
$(document).ready （然后完成，我想在窗口调整大小时加载这个函数。）
我很可能在这里遇到语法问题，非常感谢帮助。
谢谢！
reactjs - getBoundingClienRect() 第一次检索元素的正确位置，但在第二次渲染后为 {0,0,0,0}
我目前正在开发一个 Ionic4/stencil 应用程序（使用 PWA 工具包：https ://ionicframework.com/pwa/toolkit ）并遇到获取组件位置的问题。
}
当用户点击 ion-button 时，我们使用我们想要检索位置的 img 的 id 调用 getPos() 方法。
当我单击按钮时，一切正常，我在控制台中看到我的 img 的良好位置：
但是，如果我再次单击图像，我会得到 {0,0,0,0} 坐标...
你对此有什么解释吗？
提前致谢，