Hello in this jQuery video I am going to show you how to get the elements dimensions. So, the few different basic properties that you can actually get from a element and the basic one is width and height. So this is purely how much space that element takes based on its you know, content essentially. Then what you can do is something called inner width and in height which also factors in you know, padding there might be on the left and right for width and padding on the top and bottom for the height then you can get the outer width and the outer height as well. Which also which, yeah, outer width factors in the border as well on top of the padding. So the my border left to right you know top and bottom, that sort of stuff.
And then you we can do for the ITU with if you pass in a parameter recruit or add your height with a parameter of proof it factored in everything, including the margin. So let's create a div element and Twitter IDs here and I'll call this red box alignment boxes and read the code here. So for the red box, I'm gonna just say width is 200 pixels. Height is 50 pixels. But we can't not actually know the inner height, the outer height or the inner width or the outer width, you know, CSS that does factor in stuff like the padding the border on the margin, like I say, then I reload and I'm going to say min width Ah, reason it's not funny this light sighs I've just under a background color for it yet, but we'll put a background for red. There we go.
Okay, so we've got the box. Now let me just do console dot log. And to be able to get the different properties, we're all we're all doing is creating a variable so far, I'll say width equals, then you need to select the element. So I'm going to say, box. And to be able to get the width is literally simple. You just do dot width.
You can obviously get it via a CSS property, but this just allows you to get it directly answers really simple and really, really easy. Okay, so that allows us to be able to you know, get it Now we are going to get the height as well. So I am going to console. I'm going to console log. Let's see what we get if I reload your value of 203 60, so 250. That makes sense.
So now if we go to this diagram, let's add some padding. So I'm going to add padding all the way around. Just keep it simple. Set a padding of 10 pixels to reload. As you can see, though, this increased in size, the, the actual width and height didn't change. If we go to elements and scroll down to really cool you can see that this is the element and then we have this little template for padding, the left the right on the top in the bottom.
So to be able to detect lat in our In jQuery, we can just copy this, just to keep it simple. We'll say this is going to be in a width and a height. And I will just copy paste here because that's what the methods are called as well. And I'll actually put in a whip something these lines just to make you see what each value represents. As we get about three or six, probably eight values in total printed out. It's going to be it might be hard to distinguish, but if you're looking at the source code, and no, we aren't going to do the same for the inner width.
The inner know If I reload it now, I save the 220 and 370. You might be thinking, but we added a padding of 10 pixels. But don't forget, if you go here, the padding is 10 pixels on the left and 10 pixels on the right, plus a total of 20 extra pixels for the width in terms of the inner width and same for the height as well. If you had a different amount for the left and different mount for the right, the figures will be different. Just add them together and add it to the width or the height. And next we'll look at the Add to width.
Which factors in border. So if border and I'm going to say border dash, two pixels. We'll say border a lot. Black we notice what we get I can pull the dash dial, nothing solid. There we go. Okay, so we've got a board in there as well, these values haven't changed.
So now let's get the out to wet. So I would select like this. So outer and outer along. Next we are going to copy and paste this and modify it. So we did printing it out to Width and the Height Okay, so now if we reload, as you can see it factors in well in terms of the actual site so Next what we are going to look at and if we you know, just inspect the element, you can see that we have a border of free. And if we go to the actual sort of style here per default one a frequent border depth with other non white border that site or reload that nice little spinner, we've got the proper value apply, and it's 224 does a little mistake on my part.
Finally, I am going to add some margin margin won't be inside so the color won't, you know increase. He just sort of moves it away or move elements away from it. But for a margin, again, you can apply a specific margin to the left, the right the top and the bottom bottom can keep it simple. Tamayo 90 pixels 92 tools, I reload advocates moved away but Nothing reflected here. Remember to get the a two with on a two with give. Nigel you just need to pass in true.
Do the same here. Finally, I just need to copy and paste this out to width margin. And I meant to be out to where to How to Win margin and I'm just going to modify the okay, but save that reload. There we go. We get that factored in as well. We had a total what was it meant to be?
It was meant to be 90 pixels 99 degrees on the left and the right Run at 224 plus 184. Four. And you can do the same check with the hardware and it will. Oh, so this has been for a long video, don't get me wrong, we've covered quite a lot with the, you know, the dimension, this is really, really useful to be able to get the dimensions the dimensions of the window itself to document, any element does not matter. Those are really powerful thing. Depending on the dimension, you could position other items accordingly.
This is how responsive frameworks work. They use a combination of CSS and jQuery to ensure that things are always looking correctly, even when the few pixels changed on the screen. One last thing I'm going to show you exactly how to just set the height and the margin. You can actually do that feed off just constantly get it if I create a button and if in this button I have an idea Click me, click me and this is going to say to do change. I just have one to change both of them. I don't need to first click when pick up the actual buttons, so click me.
If you want to know more about selectors, feel free to check out that part of the series and more about event like, click Feel free to check that function. Now, all I'm gonna do if you select what you're essentially changing the width and the height for the red box, and dot width, if you leave it with no parameters, it returned the width. If you provide a parameter, you'll set the width to that now deposit 400 I'll save that. And I'm just gonna set a width for now. And I click this, as you can see, it's changed the width actually has an extra task, what I want you to do is change the height I want to create an extra button, use what you've learned over build, you know, over this series, and create a button that changes the height, maybe even go step further, create a text box, you know, some sort of no text input, we can put a number in, and when you click the Change with or change white button, it actually gets the value from that input.
And that is why the flight that'll be really cool. Look forward to seeing what you come up with. Thanks for watching, and I look forward to seeing you in the next video.