getboundingclientrect

How best to convert a ClientRect / DomRect into a plain Object

由 我与影子孤独终老i 提交于 2019-12-29 08:27:34
问题 The result of someElement.getBoundingClientRect() returns a special object of type ClientRect (or DomRect apparently) It is structured like {top: 10, right: 20, bottom: 30, left: 10, width: 10} Unfortunately, this object does not behave quite like other objects. For example, using Object.keys on it returns an empty array (I think because ClientRect properties are not enumerable I found something of a dirty way to convert to a plain object: var obj = {} for (key in rect) { obj[key] = rect[key]

In google chrome, getBoundingClientRect().x is undefined

由 拥有回忆 提交于 2019-12-18 11:50:52
问题 I'm performing drawing operations on canvas. The best way to calculate cursor position relative to canvase top left corner is, in my opinion, usage of .getBoundingClientRect() : HTMLCanvasElement.prototype.relativeCoords = function(event) { var x,y; //This is the current screen rectangle of canvas var rect = this.getBoundingClientRect(); //Recalculate mouse offsets to relative offsets x = event.clientX - rect.x; y = event.clientY - rect.y; //Debug console.log("x(",x,") = event.clientX(",event

When is Element.getBoundingClientRect guaranteed to be updated / accurate?

由 不想你离开。 提交于 2019-12-05 06:16:45
问题 I am working on some code that uses Element.getBoundingClientRect (gBCR), coupled with inline style updates, to perform calculation. This is not for a general website and I am not concerned or interested in if there are "better CSS ways" of doing this task. The JavaScript is run synchronously and performs these steps: The parent's gBCR is fetched Calculations are performed and; A child element of the parent has inline CSS styles (eg. size and margins) updated The parent's gBCR is fetched

JavaScript getBoundingClientRect() changes while scrolling

由 自作多情 提交于 2019-11-27 17:14:45
I want to have the exact distance between the Y-coordinate of an element an the Y-value=0, which I consider as the top of the document. myElement.getBoundingClientRect().top; But the value of getBoundingClientRect() seems to change while scrolling. How can I get the real distance between myElement and the Y-coordinate=0 (top of document)? It is because getBoundingClientRect() gets values with respect to the window (only the current visible portion of the page), not the document (whole page). Hence, it also takes scrolling into account when calculating its values Basically, document = window +

JavaScript getBoundingClientRect() changes while scrolling

由 冷暖自知 提交于 2019-11-26 18:56:20
问题 I want to have the exact distance between the Y-coordinate of an element an the Y-value=0, which I consider as the top of the document. myElement.getBoundingClientRect().top; But the value of getBoundingClientRect() seems to change while scrolling. How can I get the real distance between myElement and the Y-coordinate=0 (top of document)? 回答1: It is because getBoundingClientRect() gets values with respect to the window (only the current visible portion of the page), not the document (whole
订阅 getboundingclientrect