问题标签 [getboundingclientrect]

我如何使用 getBoundingClientRect() 来确定图像的宽度和高度

我想要的是当第一个（.goccia）元素到达屏幕底部时，设置间隔功能停止。

我试图创建一个这样的变量：

然后像这样做一个“如果”：

但他给了我一个错误，说“getBoundingClientRect() 不是函数”。

我想以可靠的方式找出 DOM 元素的尺寸。

我的考虑是为此使用 getBoundingClientRect 。

这种方法的问题是 useEffect 仅对 elementRef.current 做出反应，而不对 rect 更改做出反应。显然浏览器中组件的绘制还没有完成，因为尺寸总是0。

如果我在 useEffect 之外做所有事情，那么它就可以工作。在控制台中，我看到 0 的 2 倍值，然后是正确的尺寸。

使用 useEffect：

使用效果之外：

但是，我想将尺寸保存在状态中，为此我需要 useEffect。

如何使用 getBoundingClientRect 实现这一点，或者有其他方法可以做到这一点吗？

解决方案

这不是自我反应的问题。这是离子 V5 反应中的错误。

通常你可以这样做：

https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

但这里有一个问题：

https://github.com/ionic-team/ionic/issues/19770

我的解决方案是使用：https ://github.com/que-etc/resize-observer-polyfill

我通过 jquery kendu-ui 有一个直接的可拖动模式窗口。

我的目标是简单地获取top left模态相对于浏览器窗口的位置的屏幕坐标...我正在尝试offset和getBoundingClientRect()方法，下面只是一些尝试的示例，所有尝试都是不断控制台日志记录0, 0, ..我在这里做错了什么？

我有一个菜单，我想要一个高亮栏在导航上的菜单项之间进行转换（因此，当您将鼠标悬停在每个菜单项上时，高亮会顺利地从一个菜单项转到另一个菜单项）。

我可以得到它，因此“突出显示”会更改高度和宽度以匹配.nav-link导航项，但我似乎无法使用变换属性来使用 X 和 Y 定位坐标。

任何帮助都是极好的。

艾米丽

代码笔： https ://codepen.io/emilychews/pen/QWjOxKz

我正在尝试找到我在这里拥有的物品的高度。该项目的格式如下：

其中几个在一个大容器 div 中， class press-blocks。我的 CSS 看起来像这样：

在 Javascript 中，我试图找到每个单独press-itemdiv 的高度。我有这个：

当我运行该页面时，它告诉我“无法读取属性 'getBoundingClientRect' of null”。它不应该为空，我的 html 有 21 个具有该类名的 div。我正在尝试做类似于https://w3bits.com/css-grid-masonry/上的教程的事情。

在 Android 布局中，它有一个包含 LinearLayout 的 RelativeLayout（忽略布局中的一些其他视图）。

list_container可能有几个视图，一个是 webView 。想要做的是在 webview 加载的 html 中，有一个 div 元素，所以 android 端可以定位这个 div 并在该 div 元素顶部浮动一个视图（<div>被视为位置标记）。

使其更简单，假设 中只有一个 webview list_container，因此originwebview 视图的 与 relativeLayout 的左/上相同。

并且有一些浮动 View 是 RelativeLayout 的子级（的兄弟list_container），因此想法是设置floatingView的左/上边距以将 floatingView 放置<div>在 html 中的元素上。

这里使用webview.evaluateJavascript运行 javascript，并通过回调获取元素的位置（从 js 的 document.getElementById(elm.id).getBoundingClientRect() 获取，之后，只需将左侧/顶部应用于浮动视图利润。

但结果是浮动视图没有放置在返回的 html<div>元素的left/top处，它在 html 内容的不同部分上处于关闭状态（在不同的设备上，关闭可能更大或更小）。

不是 webview 和 webview 中托管的 html 都应该具有相同的来源（实际上与 relativeLayout 的 lefty/top 相同）吗？为什么我们不能直接使用从 html dom 的getBoundingClientRect()获得的left/top作为视图的边距（用于定位视图）？

我检查了开发，它说“getboundingclientrect() 不是一个函数”。

当我更改“document.querySelectorAll(".art");” 进入“document.querySelector(".art");”，它可以工作，但只有文章的第一个孩子有艺术类。

getBoundingClientRect()当涉及到具有给定笔画宽度的 SVG 路径时，不同浏览器的实现会有所不同， Firefox 等浏览器包括笔画宽度（例如，与 Chrome 不同）。

通过“包括笔画宽度”，我希望边界框包含路径及其笔画，但仅此而已。但是，正如您在这个基本示例中看到的那样，在 Firefox 中，stroke-width 似乎在整个元素周围创建了一个额外的边框，其值是 stroke-width 本身的两倍：

这是上面非常片段的屏幕截图，检查元素：

正如您所看到的，不仅getBoundingClientRect()是开发工具检查器也弄错了边界矩形（420x120而不是300x30。值得一提的是，Chrome 和 Safari 将返回300x0，如第一段所述）。

这是预期的行为吗？

我正在尝试使用 Javascript 和 CSS 制作西洋双陆棋游戏，并尝试使用PX调整所有元素的大小并通过这种方式获得棋子的移动距离：

请不要注意垂直运动

现在，当我转换我的根元素（Board Element）以使板适合页面时，我看到除了缩放开始和结束（例如使用 1.5 倍缩放，开始：75 和结束：90），距离会改变在开始和结束更改期间（变为 90 - 75 : 15）并通过缩放（15 * 1.5: 22.5）更改另一个时间，所以我看到了一个糟糕的翻译。

每个尺寸都是PX但我不明白问题出在哪里！？！？！？:(

我认为这很好，我明白当我将页面宽度设置为小于主尺寸时，锯齿距离会减小！！！

这是了解我的问题的一部分！（我在第一次移动后撤消移动）