Add Get The Location And Size Of An Element as a javascript til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_642 TILs and counting..._
+_643 TILs and counting..._
 
 ---
 
@@ -234,6 +234,7 @@ _642 TILs and counting..._
 - [Expand Emojis With The Spread Operator](javascript/expand-emojis-with-the-spread-operator.md)
 - [Fill An Input With A Ton Of Text](javascript/fill-an-input-with-a-ton-of-text.md)
 - [Freeze An Object, Sorta](javascript/freeze-an-object-sorta.md)
+- [Get The Location And Size Of An Element](javascript/get-the-location-and-size-of-an-element.md)
 - [Globally Install A Package With Yarn](javascript/globally-install-a-package-with-yarn.md)
 - [Immutable Remove With The Spread Operator](javascript/immutable-remove-with-the-spread-operator.md)
 - [Initialize A New JavaScript Project With Yarn](javascript/initialize-a-new-javascript-project-with-yarn.md)

javascript/get-the-location-and-size-of-an-element.md

@@ -0,0 +1,22 @@
+# Get The Location And Size Of An Element
+
+[All modern browsers](https://caniuse.com/#feat=getboundingclientrect) ship
+with the [`getBoundingClientRrect()`
+function](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). It can be invoked for any DOM element. It returns the `x` and `y` coordinates of the element within the browser viewport as well as the `height` and `width` values and the `top` and `bottom` values along the `y-axis` and `left` and `right` values along the `x-axis`.
+
+```javascript
+> $0.getBoundingClientRect()
+{
+  "x": 381.421875,
+  "y": 70,
+  "width": 1030.578125,
+  "height": 48,
+  "top": 70,
+  "right": 1412,
+  "bottom": 118,
+  "left": 381.421875
+}
+```
+
+For instance, this is the result of invoking it against a header element on
+the _MDN page_ linked above.