Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What type does `getBoundingClientRect()` return?

Tags:

typescript

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.

like image 226
Angel Angel Avatar asked Feb 10 '16 23:02

Angel Angel


People also ask

What does getBoundingClientRect return?

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.

What is getBoundingClientRect relative to?

getBoundingClientRect() gives a result relative to the viewport's top-left corner ( 0,0 ), not relative to an element's parent, whereas el.

Does getBoundingClientRect include padding?

Border, padding and margin are not included.

Is getBoundingClientRect slow?

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.


1 Answers

What kind returns getBoundingClientRect()

It returns DOMRect:

const logo1: HTMLElement = document.getElementById('test'); 
const logo1TextRectangle: DOMRect = logo1.getBoundingClientRect();

More

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:

enter image description here

like image 185
basarat Avatar answered Oct 10 '22 19:10

basarat