The Element.getBoundingClientRect() method in vanilla JS

You can use the Element.getBoundingClientRect() to get information about the size of an element and its position relative to the viewport.
For example, let’s say you have an element with the #app ID somewhere in the DOM.
<div id=”app”>Looking for me?</div> You can call the Element.getBoundingClientRect() method on the element to get details about its position in the viewport.
let app = document.querySelector(‘#app’); let details = app.getBoundingClientRect(); Here’s a demo.


This content originally appeared on Go Make Things and was authored by Go Make Things

You can use the Element.getBoundingClientRect() to get information about the size of an element and its position relative to the viewport.

For example, let’s say you have an element with the #app ID somewhere in the DOM.

<div id="app">Looking for me?</div>

You can call the Element.getBoundingClientRect() method on the element to get details about its position in the viewport.

let app = document.querySelector('#app');
let details = app.getBoundingClientRect();

Here’s a demo.

Property details:

  • y/top - the distance from the top of the element to the top of the viewport.
  • x/left - the distance from the left side of the element to the left side of the viewport.
  • right - the distance from the right side of the element to the left side of the viewport.
  • bottom - the distance from the bottom of the element to the top of the viewport.
  • width - the width of the element, including padding and border
  • height - the height of the element, including padding and border


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2021-04-08T14:30:00+00:00) The Element.getBoundingClientRect() method in vanilla JS. Retrieved from https://www.scien.cx/2021/04/08/the-element-getboundingclientrect-method-in-vanilla-js/

MLA
" » The Element.getBoundingClientRect() method in vanilla JS." Go Make Things | Sciencx - Thursday April 8, 2021, https://www.scien.cx/2021/04/08/the-element-getboundingclientrect-method-in-vanilla-js/
HARVARD
Go Make Things | Sciencx Thursday April 8, 2021 » The Element.getBoundingClientRect() method in vanilla JS., viewed ,<https://www.scien.cx/2021/04/08/the-element-getboundingclientrect-method-in-vanilla-js/>
VANCOUVER
Go Make Things | Sciencx - » The Element.getBoundingClientRect() method in vanilla JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/08/the-element-getboundingclientrect-method-in-vanilla-js/
CHICAGO
" » The Element.getBoundingClientRect() method in vanilla JS." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2021/04/08/the-element-getboundingclientrect-method-in-vanilla-js/
IEEE
" » The Element.getBoundingClientRect() method in vanilla JS." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2021/04/08/the-element-getboundingclientrect-method-in-vanilla-js/. [Accessed: ]
rf:citation
» The Element.getBoundingClientRect() method in vanilla JS | Go Make Things | Sciencx | https://www.scien.cx/2021/04/08/the-element-getboundingclientrect-method-in-vanilla-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts