diff --git a/README.md b/README.md index a6c3230..fae847f 100644 --- a/README.md +++ b/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) diff --git a/javascript/get-the-location-and-size-of-an-element.md b/javascript/get-the-location-and-size-of-an-element.md new file mode 100644 index 0000000..c23f28e --- /dev/null +++ b/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.