This lesson we're going to be covering get bounding client rectangle and what this does is this gets
the size position of an element using the get bounding rectangle.
You can get a lot of property values of an element.
So returning back where it's top position is left position, right, bottom x, y width and height.
So these are super useful, especially when you're trying to select elements and manipulate them and
also collision detection when you're trying to check if one element is on top of the other.
So the way that you write this is that you have the object.
So this is the element and you can get the properties of that element using get bounding client rectangle.
So there's eight properties again that you get.
So we do have a challenge for this lesson and that's to get the dimensions and location of X and Y of
the element.
And I'll put it to the console.
So we do have an element.
We've set some style properties here and we're going to retrieve back those style properties from the
element into the console using get bounding client rectangle.
I'll walk you through the solution video here and I'll show you the solution coming up.
Give it a try.
So already have a div on the page.
I'm going to select this divot.
I'm going to update its properties.
So this is our element that we're going to use using document and then query selector selecting the
element.
That's a div.
We only have the one.
So that's really easy to make the selection.
And now we're going to update and selected style.
So updating its width and then the objective is to retrieve all of this information back using JavaScript,
using that one method, also updating its height.
So let's set the height to one, two, three, four, five, or one, two, three picks position absolute
so that we've got option to position.
So option to position it and make sure that we set this to absolute so that we can move it around the
page.
Otherwise the top and left are always going to be zero.
So element style, so top position and we can actually set this to 55.
So it's not going to always be 100 there so we can distinguish between the different values.
There's also the left value and background color.
So take the element style and one more.
Let's do background color.
And this isn't actually one that you can get, but we're just adding it in there so that we can see
the element.
So we want to do is use console like and this is going to be really short because we're selecting the
element and then we're getting its values.
So get down in client rectangle method and we're just simply applying that and seeing what outputs into
the console.
So you can see we get all of those values, we get the bottom position, which is useful, and that
also changes.
So depending on the size of the screen, this can change as well, because this is from the bottom of
the screen where it's positioned the height of the elements.
We have that where we start the left, we set that right is something we didn't set.
But we are able to get the right also top and width.
We set X and Y position of that element relevant to the page.
So you get all of this useful information and it does save you quite a bit of time as when you need
to get this information one by one.
You can quite easily place it within an object and then you can use that object within your code.
So try this one at.