Maybe this is a stupid question.
What type does getBoundingClientRect()
return? I have the following errors:
var logo1: HTMLElement = document.getElementById('test');
var logo1TextRectangle: DOMRect = logo1.getBoundingClientRect(); <- error
error TS2304: Cannot find name 'DOMRect'.
I watch this https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
var logo1TextRectangle: nsIDOMClientRect = logo1.getBoundingClientRect(); <- error
error TS2304: Cannot find name 'nsIDOMClientRect'.
and this https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect
I know I can just use this:
var logo1TextRectangle: any = logo1.getBoundingClientRect();
but can anybody tell me what is the returned type, or tell me a link where I can take a look to the returned types. Thanks and sorry for my English.
The getBoundingClientRect() method returns the size of an element and its position relative to the viewport. The getBoundingClientRect() method returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.
getBoundingClientRect() gives a result relative to the viewport's top-left corner ( 0,0 ), not relative to an element's parent, whereas el.
Border, padding and margin are not included.
Call getBoundingClientRect() It's relatively fast when you have a small number of elements. But it's getting to be slower and forcing a reflow when the number of elements starts to rise dramatically, or when calling multiple time.
What kind returns getBoundingClientRect()
It returns DOMRect
:
const logo1: HTMLElement = document.getElementById('test');
const logo1TextRectangle: DOMRect = logo1.getBoundingClientRect();
FWIW you can let the compiler infer it for you :
const logo1: HTMLElement = document.getElementById('test');
const logo1TextRectangle: DOMRect = logo1.getBoundingClientRect();
And if you hover over the variable you will see that its correctly inferred:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With