Using getBoundingClientRect to Get an Element's Size and Position

getBoundingClientRect, part of the JavaScript DOM (Document Object Model), provides you with important pieces of data about an HTML element’s size and positioning. Using getBoundingClientRect First, some simple markup: <div id="foo">Hello World</div> And now let’s call getBoundingClientRect on our #foo element: document.getElementById('foo').getBoundingClientRect(); // => { // top: Number, // left: Number, // right: Number, // bottom: Number, // x: Number, // ...

Submit