Menu
I just discovered and really like getBoundingClientRect because it includes sub-pixel precision. This has allowed me to create consistent alignment, even if the user types Ctrl+ or Ctrl+-.
It has properties top, bottom, left, right, & width & height.
It is simple to find the browser support on the internet, but not so much for the the width and height properties in particular. It appears that this was added after the fact. It works in Firefox, Chrome, and IE10, but what about IE8 & IE9? I can't test these conveniently.
416
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.
The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
It is reliably supported on all desktop and mobile browsers, with the exclusion of the x and y values which is unstable in older versions of Internet Explorer/Edge and Safari.
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.
In IE9 as IE8:
document.body.getBoundingClientRect()
[object] {
right : 2556,
top : 0,
bottom : 1195,
left : 0
}
In IE9 as IE9:
document.body.getBoundingClientRect()
[object ClientRect] {
bottom : 1435,
height : 1435,
left : 0,
right : 2544,
top : 0,
width : 2544
}
So, I'd say yes on IE9, no on IE8...
102
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
