问题标签 [getboundingclientrect]

在引导选项卡中使用 Muuri 库时，它不会将项目放置在正确的位置。这一切都是因为 Muuri 使用 getBoundingClientRect() 来获取主容器的大小，而这个函数由于某种原因返回 0 值。我会感谢你的帮助。

假设我们有一个文本溢出它的容器 div：

如您所见，容器 div 具有固定宽度（20px），但即使文本明显大于该getBoundingClientRect()值也不会超过该容器值。

在这种情况下，有没有其他方法可以获取文本元素的边界矩形？

我知道它getBoundingClientRect()返回一个ClientRector类型的对象DOMRect，并且每个对象通常都具有x, y, width,等属性height。如果你typeof拥有这些属性，你会得到Number.

所以我的问题是，这Number是多少？Pixels px、 points pt、 percent%和类似的东西是可能的答案。我认为是像素，但我对此并不完全确定。谁能证实这一点？

我跟踪我网站上的点击次数。对于每次点击，我都会使用以下函数获取点击元素上的点击坐标（由返回 css 路径的函数 getPath 引用）：

然后我正在创建点击的可视化。为此，我将元素的 X 和 Y 坐标重新转换为窗口的 X 和 Y 坐标。为此我使用：

但是 getBoundingClientRect() 每次加载页面时都不会为元素返回相同的值。从 getBoundingClientRect() 返回的相同元素的值不断变化，这为我的点击创建了错误的坐标。

我已经在 Chrome 87 和 Firefox 78 上对其进行了测试，两者都为相同的确切窗口大小返回不同的 getBoundingClientRect() 值。

有谁知道为什么会发生这种情况，之前遇到过这个错误，或者有另一个未被破坏的函数来获取 DOM 元素的坐标？

我正在制作一个弹出功能，它在用户屏幕上创建一个弹出窗口。这是代码：

返回一个具有所有属性的getBoundingClientRect()对象，作为值为 0 的整数。

运行堆栈片段，您将收到所有值的警报getBoundingClientRect()（全为 0）。谁能解释为什么？

我遇到了 JavaScript querySelectorAll () 方法的问题。

我想对两个段落（p）标签产生淡入淡出效果，它们最初的不透明度都设置为 0，并且 transform: translateY 的 15vh 将它们向下移动一点，我想要当段落出现在屏幕底部时，在用户向下滚动期间，返回不透明度 1 和 transform:translateY 为 0。

我创建了一个名为scrollAppear()的函数，在其中我有很多东西..

首先，我有一个变量paragraphsToFade，其中包含两个带有“paragraphs_to_fade”类的段落；我使用 querySelectorAll 方法来获取具有类 (.paragraphs_to_fade) 的两个 (p) 标记。

这给我一个数组（nodeList）..

然后我想访问段落的坐标 Y，为了实现这一点，我使用了getBoundingClientRect().top方法，在这种情况下，它返回指定元素相对于窗口顶部的顶部。

我将值存储在一个名为paragraphsPosition的变量中；

但是要获得两个 (p) 元素的坐标 Y，我必须循环到 for 循环中并指定 [i] 变量，该变量将把两个值放在循环迭代中，如下所示：

之后，我创建了一个名为 screenSize 的变量，它可以访问窗口 Height ：

然后我用 if/else 语句检查一个条件，检查元素的顶部值是否小于窗口的高度，如果为真，则添加类 fadeInAnimation，它将不透明度重置为 1 和变换: translateY 到 0，转换为 1，正如我在解释开始时指定的那样。

最后我只是调用函数滚动出现，当用户滚动窗口时：

我不知道为什么，但是当我使用 querySelector 并且我只有一个段落时，淡入淡出效果有效，但是当我使用 querySelectorAll 并且我想抓取多个段落时，它不起作用，也许我循环不好或者别的什么，我在不同的地方使用了 console.log 试图知道发生了什么，但我不明白为什么？

我在教程中看到了这种淡入淡出效果： https ://www.youtube.com/watch?v=C_JKlr4WKKs

我在带有多个过滤器的过滤器栏中有一个应用按钮，有时此应用按钮将显示在下一行，而不是与其他过滤器显示在同一行中。如何根据此应用按钮的位置执行一组操作。如果应用按钮在下一行，我想做一组动作。

在我使用的组件中getBoundingClientRect()，

我试图getBoundingClientRect()从顶部获取价值，以便在第一行或第二行中识别它。但是getBoundingClientRect().top在不同的时间返回不同的值。因此无法根据这些getBoundingClientRect()值应用特定条件来在第一行或第二行中识别它。我该如何解决这个问题？

当文本元素在视口中可见时，我需要启动它的打字机效果。我尝试使用 getBoundClientRect 但我认为我遗漏了一些东西。它总是在文档准备好时开始，所以如果你不快速进入元素，你就看不到效果。我也尝试使用滚动事件侦听器，但效果随着滚动的移动而运行。

这是我正在使用的代码：

谢谢！！！

试图让它检测到每个元素何时被可拖动元素触摸，但它返回为反应 2 总是触摸，即使元素远不及反应 2

js：

html:

CSS：

无论如何都会不断检测化学物质是否接触，并正确检测物理接触和不接触的时间

编辑：在代码示例中添加了更多详细信息，以查看是否有其他问题，我只是误诊了问题

使用 React，我有一个父元素，它是 div，其中有一个显示网格和一个输入。

我的问题是当我从样式属性中删除 display:"grid" 时， element.getBoundingClientRect() 返回正确的值，即：

但是当我将显示属性更改为网格时，结果返回错误：

有谁知道是什么问题？

**忘了说html的方向是rtl