1
00:00:00,270 --> 00:00:05,670
This lesson we're going to be covering get bounding client rectangle and what this does is this gets

2
00:00:05,880 --> 00:00:10,500
the size position of an element using the get bounding rectangle.

3
00:00:10,500 --> 00:00:13,440
You can get a lot of property values of an element.

4
00:00:13,920 --> 00:00:20,230
So returning back where it's top position is left position, right, bottom x, y width and height.

5
00:00:20,490 --> 00:00:24,930
So these are super useful, especially when you're trying to select elements and manipulate them and

6
00:00:24,930 --> 00:00:29,610
also collision detection when you're trying to check if one element is on top of the other.

7
00:00:29,880 --> 00:00:33,470
So the way that you write this is that you have the object.

8
00:00:33,480 --> 00:00:39,040
So this is the element and you can get the properties of that element using get bounding client rectangle.

9
00:00:39,060 --> 00:00:40,860
So there's eight properties again that you get.

10
00:00:41,190 --> 00:00:47,340
So we do have a challenge for this lesson and that's to get the dimensions and location of X and Y of

11
00:00:47,340 --> 00:00:47,850
the element.

12
00:00:48,030 --> 00:00:49,830
And I'll put it to the console.

13
00:00:50,040 --> 00:00:51,210
So we do have an element.

14
00:00:51,210 --> 00:00:56,400
We've set some style properties here and we're going to retrieve back those style properties from the

15
00:00:56,400 --> 00:01:00,810
element into the console using get bounding client rectangle.

16
00:01:00,990 --> 00:01:05,260
I'll walk you through the solution video here and I'll show you the solution coming up.

17
00:01:05,490 --> 00:01:06,070
Give it a try.

18
00:01:06,300 --> 00:01:08,100
So already have a div on the page.

19
00:01:08,100 --> 00:01:09,270
I'm going to select this divot.

20
00:01:09,270 --> 00:01:11,130
I'm going to update its properties.

21
00:01:11,400 --> 00:01:18,720
So this is our element that we're going to use using document and then query selector selecting the

22
00:01:18,720 --> 00:01:19,260
element.

23
00:01:19,260 --> 00:01:19,830
That's a div.

24
00:01:19,830 --> 00:01:20,580
We only have the one.

25
00:01:20,610 --> 00:01:22,290
So that's really easy to make the selection.

26
00:01:22,560 --> 00:01:24,960
And now we're going to update and selected style.

27
00:01:25,260 --> 00:01:32,190
So updating its width and then the objective is to retrieve all of this information back using JavaScript,

28
00:01:32,190 --> 00:01:34,830
using that one method, also updating its height.

29
00:01:35,460 --> 00:01:41,760
So let's set the height to one, two, three, four, five, or one, two, three picks position absolute

30
00:01:42,060 --> 00:01:44,490
so that we've got option to position.

31
00:01:44,700 --> 00:01:50,910
So option to position it and make sure that we set this to absolute so that we can move it around the

32
00:01:50,910 --> 00:01:51,260
page.

33
00:01:51,660 --> 00:01:54,110
Otherwise the top and left are always going to be zero.

34
00:01:54,720 --> 00:02:00,410
So element style, so top position and we can actually set this to 55.

35
00:02:00,420 --> 00:02:04,600
So it's not going to always be 100 there so we can distinguish between the different values.

36
00:02:05,460 --> 00:02:08,310
There's also the left value and background color.

37
00:02:08,490 --> 00:02:11,220
So take the element style and one more.

38
00:02:11,230 --> 00:02:12,410
Let's do background color.

39
00:02:12,600 --> 00:02:16,410
And this isn't actually one that you can get, but we're just adding it in there so that we can see

40
00:02:16,410 --> 00:02:16,920
the element.

41
00:02:17,160 --> 00:02:22,710
So we want to do is use console like and this is going to be really short because we're selecting the

42
00:02:22,710 --> 00:02:25,470
element and then we're getting its values.

43
00:02:25,470 --> 00:02:30,630
So get down in client rectangle method and we're just simply applying that and seeing what outputs into

44
00:02:30,630 --> 00:02:31,230
the console.

45
00:02:31,530 --> 00:02:36,630
So you can see we get all of those values, we get the bottom position, which is useful, and that

46
00:02:36,630 --> 00:02:37,590
also changes.

47
00:02:37,830 --> 00:02:43,020
So depending on the size of the screen, this can change as well, because this is from the bottom of

48
00:02:43,020 --> 00:02:45,820
the screen where it's positioned the height of the elements.

49
00:02:45,840 --> 00:02:50,970
We have that where we start the left, we set that right is something we didn't set.

50
00:02:50,970 --> 00:02:54,990
But we are able to get the right also top and width.

51
00:02:54,990 --> 00:02:59,040
We set X and Y position of that element relevant to the page.

52
00:02:59,520 --> 00:03:05,490
So you get all of this useful information and it does save you quite a bit of time as when you need

53
00:03:05,490 --> 00:03:07,470
to get this information one by one.

54
00:03:07,590 --> 00:03:12,180
You can quite easily place it within an object and then you can use that object within your code.

55
00:03:12,510 --> 00:03:13,410
So try this one at.